随 着 移动 智能 设备 的 普及 ， 从 安 卓 智能 手机 到 苹果 公司 的 ijPad 平 板 电 脑 ， 再 到 快速 发 展 的 Windows Phone 智 能 手机 ， 正 快 
速 地 走 进入 们 的 生活 ， 甚 至 改变 看 人 们 的 生活 方式 。 这 些 智 能 设备 都 有 一 个 共同 点 ， 那 残 是 大 多 抛 并 了 繁琐 的 实体 按键 ， 改 为 全 
屏 触 摸 操 作 ， 同 时 具备 更 加 丰富 的 拓展 功能 。 此 时 UI 设计 也 伴随 着 智能 设备 的 友 展 新 渐 被 越 来 越 多 的 人 所 熟知 ， 智 能 设备 屏幕 
变 大 了 ， 功 能 更 多 了 ， 人 们 对 其 视 嘻 效果 也 越 来 越 重 视 ， 大 部 分 用 户 希 望 界面 的 图 标 更 加 漂亮 ， 更 具 识 别 性 ， 手 机 主题 更 加 个 
性 、 时 尚 ， 本 书 的 出 现 束 是 为 了 让 你 快速 了 解 并 掌握 UI 设计 。 


本 书 内 容 

通过 阅读 本 书 ， 读 者 可 以 快速 学 到 以 下 内 容 : 
“ UI 设计 快速 入 门 

- UI 基础 控件 设计 

“简约 扁平 化 图 标 设计 

`. 超 写 实 元 素 设计 

' 立体 化 图 标 设计 

` 界面 图 像 及 特效 处 理 

. 精彩 游戏 界面 设计 

应 用 系统 界面 设计 


本 书 采 用 最 新 版 Photoshop CC2015 制 作 和 讲解 ， 让 你 在 第 一 时 间 领 略 PS 最 新 版 本 的 精彩 之 处 。 同 时 本 书 并 不 局 限于 软件 
版 本 ， 同 样 适用 于 Photoshop CS、CS2、CS3、CS4、CS5、CS6、CC 版 本 ， 所 以 读者 完全 不 用 担心 会 受 软件 版 本 的 困扰 ， 相 
言 沿 握 的 是 Ul 设计 的 实战 技术 ! 


本 书 特色 
(1) 从 快速 认识 并 了 解 UI 设 计 开 始 到 各 类 风格 的 界面 制作 ， 让 读者 有 一 个 全 面 的 了 解 和 学 习 。 


(2) 在 全 面 讲解 过 程 中 会 加 入 相关 的 内 容 提示 ， 让 读者 在 学 习 的 过 程 中 能 够 避免 犯 下 小 错误 的 同时 将 学 习 到 的 知识 举 一 反 


(3) 更 加 贴近 读者 生活 ， 大 量 及 用 了 生活 中 常见 的 界面 设计 风格 追随 最 前 沿 的 设计 潮流 ， 让 目 己 掌握 的 技术 不 落伍 ， 无 论 
在 真正 的 界面 设计 中 ， 还 是 在 局 友 设 计 灵 感 过 程 中 都 能 收获 更 多 ， 擎 握 更 多 ! 


(4) 实用 性 与 理论 性 完美 结合 ， 无 论 是 刚 接触 设计 的 菜鸟 还 是 已 经 熟练 掌握 设计 软件 的 大 鸟 都 可 以 快速 入 门 并 上 手 。 


本 书 由 王 红 卫 主编 ， 同 时 参与 编写 的 还 有 张 四 海 、 余 昊 、 贺 容 、 王 英杰 、 瞳 鹏 、 熔 晓 洁 、 王 世 迪 、 昌 保 成 、 殖 桢 想 、 王 红 
局 、 胡 瑞 方 、 王 雄 化 、 夏 红军 、 李 慧 娟 、 杨 树 奇 、 王 巧 伶 、 陈 家 文 、 王 香 、 杨 曼 、 马 玉 旋 、 张 田 田 、 谢 颁 伟 、 张 更 、 石 珍 珍 、 陈 


` A 大 
志 伴 等 。 


在 创作 的 过 程 中 ， 由 于 时 间 仓 促 ， 错 误 在 所 难免 ， 和 希望 广大 读者 批评 指正 。 如 果 在 学 习 过 程 中 友 现 问题 或 有 更 好 的 建议 ， 欢 
迎 发 邮件 至 smbook@163.com 与 我 们 联系 。 


与 本 书 配套 的 案例 视频 文件 、 素 材 及 源 文件 下 载 地 址 为 : 
http://pan.baidu.com/s/1o80Q5cA (注意 区 分 英文 大 小 写 ) 。 
如 果 下 载 有 问题 ， 请 电子 邮件 联系 booksaga@126.com， 邮 件 主题 为 “Photoshop 新 手 学 UI 艺术 设计 ”。 
编者 
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第 1 章 UI 设 计 快 速 入 门 


内 容 摘要 


本 章 主要 讲解 UI 设 计 快 速 入 门 的 相关 知识 ， 在 进入 专业 的 UI 设 计 领 域 之 前 需要 掌握 相关 的 基础 知识 ， 通 过 对 不 同 的 名 词 剖 
析 ， 在 短 时 间 内 理解 专业 名 词 的 含义 ， 为 以 后 的 设计 之 路 打下 坚实 的 基础 。 


教学 目标 
- UI 设计 概念 
- UI 设计 组 成 部 分 


“ UI 设计 与 产品 团队 合作 流程 关系 


“各 类 尺寸 单位 解析 


. UI 设计 原则 


-GUI 设计 过 程 中 的 表现 力 

. 提升 Android 视 觉 效果 的 设计 技巧 

. 免费 的 UI 界面 设计 工具 、 资 源 及 网 站 
-色彩 学 基础 知识 

UI 设计 常见 配色 方案 

` 色彩 的 性 格 

- 精彩 UI 设计 赏析 


` 手绘 草图 的 重要 性 


1.1 UI 设计 概念 


UI (User Interface) 即 用 户 界面 ， 它 是 系统 和 用 户 之 间 进 行 交 互 和 信息 交换 的 媒介 ， 它 实现 信息 的 内 部 形式 与 人 类 可 以 接 
受 形式 之 间 的 转换 。 好 的 Ul 设计 不 仅 让 软件 变 得 有 个 性 ， 有 了 品味， 还 会 让 软件 操作 变 得 舒适 、 简 单 、 自 由 ， 充 分 体现 软件 的 定 
位 和 特点 。UlI 设 计 主 要 由 以 下 三 个 部 分 组 成 。 


1. 图 形 界面 设计 (Graphical User Interface) 


图 形 界面 设计 是 指 米 用 图 形 方 式 显示 的 用 尸 操 作 界 面 。 图 形 界面 对 于 用 户 来 说 ， 在 完美 视 党 效果 上 十 分 明显 ， 它 通过 图 形 界 
面向 用 户 展示 了 功能 、 模 块 、 媒 体 等 信息 。 


通常 人 们 所 说 的 视 迪 设计 师 就 是 指 设计 图 形 界面 的 设计 师 ， 一 般 从 事 此 类 行业 的 设计 师 大 多 都 经 过 专业 的 美术 培训 ， 有 一 定 
的 专业 背景 。 


2. 交 互 设计 (Interaction Design) 
交互 设计 在 于 定义 人 造物 的 行为 方式 (人 工 制品 在 特定 场景 下 的 反应 方式 ) 相关 的 界面 。 


交互 设计 的 出 友 点 在 于 研究 人 和 物 交流 的 过 程 中 ， 人 的 心理 模式 和 行为 模式 ， 并 在 此 研究 基础 上 ， 设 计 出 可 提供 的 交互 方式 
以 满足 人 对 使 用 人 工 物 的 需求 。 交 互 设 计 是 设计 方法 ， 而 界面 设计 是 交互 设计 的 目 然 结 果 。 同 时 界面 设计 不 一 定 由 显 意识 交互 设 
计 驱 动 ， 但 界面 设计 必然 包含 交互 设计 (人 和 物 是 如 何 进行 交流 的 ) 。 


交互 设计 师 首 先进 行 用 户 研 究 相 关 领 域 以 及 潜在 用 尸 ， 设 计 人 造物 的 行为 ， 并 从 有 用 、 可 用 及 易 用 性 等 方面 来 评估 设计 质 


H 


3. 用 户 研 究 (user study) 


与 软件 开 肥 测试 类 似 ，UI 设 计 中 也 有 用 户 测 试 ， 工 作 的 主要 内 容 是 测试 交互 设计 的 合理 性 以 及 图 形 设计 的 美观 性 。 一 天 应 
用 经 过 交互 设计 、 图 形 界面 设计 等 工作 之 后 需要 最 终 的 用 户 测 试 才 可 以 上 线 ， 此 项 工作 尤为 重要 ， 通 过 测试 可 以 友 现 应 用 中 某 些 
地 万 的 不 足 或 不 合理 性 。 


1.2 UI 设计 组 成 部 分 


在 UI 设计 领域 ， 尝 规整 套 设计 主要 由 ADS、 绘 制 草图 、 低 保 真 原型 与 高 保 真 原型 、Axure 和 图 形 界面 设计 五 部 分 组 成 。 
1.ADS (Application Definition Statement) 


ADS (Application Definition Statement) 即 应 用 定义 声明 ， 它 由 用 户 (audience) 、 定 位 (differentiator) 和 方案 


(solution) 三 部 分 组 成 。 


在 设计 过 程 中 ， 一 句 话 简短 说明 应 用 (APP) 的 作用 ， 它 能 为 (哪些 ) 用户 (在 说 明 情 况 下 ) 解决 (什么) 问题 ”从 而 展现 
出 它 的 定位 ， 然 后 列 出 最 主要 的 功能 ， 如 图 1.1 所 示 。 


图 1.1 ADS 功 能 图 示 


2. 绘 制 草图 


由 于 ADs 是 基于 文字 表达 的 一 种 方式 ， 为 了 能 够 更 清 茎 地 表达 意图 ， 融 需要 以 绘制 草图 的 方法 来 实现 。 婚 然 是 草图 ， 融 无 须 
精确 表达 ， 只 需要 特别 注意 将 整体 布局 及 重要 模块 表现 出 来 即 可 ， 同 时 可 以 根据 实际 情况 来 绘制 彩色 或 灰 度 的 草图 ， 如 图 1.2 所 


/J\o 


图 1.2 草图 效果 
提示 与 技巧 


如 今 更 多 的 公司 采用 草图 设计 模板 ， 快速、 高 效 集 多 项 优点 于 一 身 ， 由 于 是 采用 硬 质 不 请 钢 结 构 ， 可 以 多 次 利用 。 如 图 1.3 
所 示 为 Andtoid4.0UI 设 计 模 板 实物 展示 。 


< 


图 1.3 ”Andtoid4.0UI 设 计 模 板 实 物 展 示 


3. 低 保 真 原型 与 高 保 真 原型 
低 保 真 原 型 是 指 将 草图 通过 Axure、Mockup、Visio 等 交互 设计 软件 在 计算 机 上 生成 框架 效果 图 |。 


高 保 真 原型 则 追求 细节 ， 如 屏幕 尺寸 、 色 彩 细 书 等 ， 比 低 保 真 原型 更 加 耗 时 。 高 保 真 原型 通常 是 在 低 保 真 原型 得 到 确认 后 才 
开始 制作 ， 如 图 1.4 所 示 。 
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图 1.4 框架 效果 图 


4.Axure 即 Axure Rp 


Axure RP 是 一 个 款 业 的 快速 原型 设计 工具 ，Axure 代 表 美 国 Axure 公 司 ，RP 则 是 Rapid Prototyping (快速 原型 ) 的 缩写 。 
Axure RP 主要 负责 Ul 设计 过 程 中 的 定义 需求 和 规格 、 设 计 功 能 和 界面 的 专家 能 够 快速 创建 应 用 软件 或 Web 网 站 的 线 框图 、 流 程 
图 、 原 型 及 规格 说 明文 档 。 作 为 专业 的 原型 设计 工具 ， 它 不 但 能 够 快速 、 高 效 地 创建 原型 ， 而 且 还 支持 多 人 协作 设计 和 版 本 控制 
管理 。 


Axure RP 的 用 户主 要 包括 商业 分 析 师 、 信 息 架 构 师 、 可 用 性 专家 、 产 品 经 理 、|T 咨 询 师 、 用 户 体验 设计 师 、 交 互 设计 师 、 
界面 设计 师 、 程 序 开 发 工程 师 等 。Axure RP 界面 如 图 1.5 所 示 。 
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图 1.5 ”Axure RP 春 面 
5. 图 形 界 面 设计 


在 高 保 真 原型 完成 的 基础 上 ， 对 其 进 4 
1.6 所 示 。 


Jia 
本 视觉 细 


田 化 设计 ， 具 有 针对 性 地 为 图 开 


2 添加 阴影 、 
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图 1.0 


图 形 界 面 设计 


13 JUU 设 计 与 产品 团队 合作 沈 程 天 系 


Ul 设计 与 产品 团队 合作 流程 关系 如 下 。 
一 、 团 队 成 员 
产品 经 理 


对 用 户 需求 进行 分 析 调 研 ， 针 对 不 同 的 需 
到 的 各 类 资源 (人 力 、 物 力 、 财 力 等 ) 。 


行 产 品 卖点 规划 ， 然 后 将 规划 的 结果 陈述 


产品 设计 师 


产品 设计 师 侧 重 于 功能 设计 ， 考 虑 技术 的 可 行 性 ， 
至 一 些 更 复杂 的 功能 ， 而 这 些 功能 的 添加 都 是 要 经 


比如 在 设 t 
深思 熟 虑 的 。 


一 款 多 动 端 播 放 器 的 时 候 是 


高 
[FJ 


光 、 质 感 等 效果 。 图 形 界面 设计 如 


公司 上 级 ， 以 此 来 取得 项 目 所 要 用 


否 在 播放 的 过 程 中 添加 动画 提示 其 


3. 用 户 体验 工程 师 


用 户 体验 工程 师 需要 了 解 更 多 商业 层面 的 内 容 ， 其 工作 通 单 与 产品 设计 师 相 辅 相 承 ， 从 产品 的 商业 价值 角度 出 友 ， 以 用 户 的 
切身 体验 出 发 ， 对 产品 与 用 户 交 互 方面 的 环节 进行 设计 方面 的 改 民 。 


4. 图 形 界面 设计 师 


图 形 界面 设计 师 为 应 用 设计 一 款 能 适应 用 户 需求 的 界面 ， 一 和 应 用 能 人 否 成 功 与 图 形 界面 也 有 着 分 不 开 的 天 系 。 图 形 界 面 设 计 
师 常 用 软件 有 Photoshop、lllustrator、Fireworks 等 。 


二 、UI 设 计 与 项 目 流 程 步 又 


产品 定位 一 产品 风格 一 产品 控件 一 方案 制订 一 方案 提交 一 方案 选 定 。 


14 ”各 类 尺寸 里 位 解析 


在 UI 界面 设计 中 ， 单 位 的 应 用 非常 关键， 下 面 区 ® 讲 解 党 用 单位 的 使 用 。 
1. 严 十 


英寸 为 长 度 单位 ， 从 计算 机 屏幕 到 电视 机 屏幕 再 到 各 类 多 媒体 设备 的 屏幕 大 小 ， 通 单 指 屏幕 对 角 的 长 大 ， 并 且 手 持 移 动 设 
备 、 手 机 屏幕 等 也 沿用 了 这 个 概念 。 


2. 分 辨 率 
分 辨 率 为 屏幕 物理 像素 的 总 和 ， 用 屏幕 宽 乘 以 屏幕 高 的 像素 数 来 表示 ， 比 如 笔记 本 电脑 上 的 1366pxx768px， 液 晶 电 视 上 的 
1200pxx1080px， 手 机 上 的 480pxx800px、640pxx960px 等 。 


3. 网 点 密度 


网 点 密度 是 指 屏 幕 物 理 面积 内 所 包含 的 像素 数 ， 以 DPI (每 英寸 像素 点 数 或 像素 /英寸 ) 为 单位 来 计量 ，DPI 越 高 ， 显 示 的 加 
面 质量 融 趣 精细 。 在 手机 UI 设 计时 ，DPI 要 与 手机 相 匹 配 ， 因 为 低 分 辨 率 的 手机 无 法 满足 局 DPI 图 片 对 手机 硬件 的 要 求 ， 显 示 效 
果 十 分 烘 糙 ， 所 以 在 设计 过 程 中 融 涉 及 一 个 全 新 的 名 词 一 一 屏幕 密度 。 


4. 屏 幕 密度 (Screen Densities) 

以 搭载 Android 操 作 系 统 的 手机 为 例 ， 分 别 为 : 
“iDPI ( 低 密度 ) : 120 像 素 / 英 寸 ; 

 mDPI (中 密度 ) : 160 像 素 / 英 寸 ; 

' hDPI (# J) : 240 像 条 /英寸 ， 

' xhDPI (26 89 5 E) : 320 像 素 /英寸 。 


与 Android 相 比 ，iPhon 手 机 对 密度 版 本 的 数量 要 求 没有 那么 多 ， 因 为 目前 iPhon 界 面 仪 有 两 种 设计 尺寸 : 960pxx640px 和 和 


640pxx1136px， 网 点 密度 (DPI) 采用 mDPI， 即 160 像 素 / 英 寸 就 可 以 满足 设计 要 求 。 


15 ”常见 的 图 片 格式 


界面 设计 常用 的 格式 主要 有 以 下 几 种 : 


' JPEG: JPEG 是 一 种 位 图 文件 格式 ， 其 缩写 是 JPG。JPEG 几 乎 不 同 于 当前 使 用 的 任何 一 种 数字 压缩 方法 ， 它 无 法 重建 原始 
图 像 。 目 前 各 类 浏览 器 均 支 持 JPEG 格 式 ， 因 为 该 格式 的 文件 尺寸 较 小 ， 下 载 速度 快 ， 使 得 Web 页 可 以 以 较 短 的 下 载 时 间 提 供 大 
量 美观 的 图 像 ，JPEG 也 就 顺理成章 地 成 为 网 络 上 最 受 欢 迎 的 图 像 格式 ， 但 是 它 不 支持 透明 背景 。 


` GIF: GIF (Graphics Interchanee Format) 的 原 义 是 “图 像 互 挽 格 式 ”， 是 CompuSetve 公 司 在 1987 年 开发 的 图 像 文 件 格式 。 
GIF 图 像 文件 的 数据 是 经 过 压缩 的 ， 而 且 是 采用 了 可 变 长 度 等 压缩 算法 。GIEF 格 式 的 另 一 个 特点 是 其 在 一 个 GIF 文件 中 可 以 保存 
多 幅 彩 色 图 像 ， 如 果 把 保存 于 一 个 文件 中 的 多 幅 图 像 数 据 逐 幅 读 出 并 显示 到 屏幕 上 ， 就 可 以 构成 一 种 最 简单 的 动画 。 


PNG: PNG 图 像 文件 存储 格式 ， 其 目的 是 试图 替代 GIFE 和 TIFF 文 件 格式 ， 同 时 增加 一 些 GIE 文 件 格式 所 不 有 具备 的 特性 。 可 
移植 网 络 图 形 格式 (Portable Network Graphic Format, PNG) 名 称 来 源 于 非 官方 的 PNG's Not GIF， 是 一 种 位 图 文件 (bitmap 
file) 存储 格式 ， 读 成 Ping。PNG 用 来 存储 灰 度 图 像 时 ， 灰 度 图 像 的 深度 可 多 到 16 位 ， 存 储 彩 色 图 像 时 ， 彩 色 图 像 的 深度 可 多 到 48 
位 ， 并 且 还 可 存储 多 到 16 位 的 a 通道 数据 。PNG 使 用 从 LZ77 派 生 的 无 损 数据 压缩 算法 ， 因 为 其 压缩 比 高 ， 生 成 文件 容量 小 ， 一 般 
应 用 于 JAVA 程 序 中 ， 或 者 背景 网 页 及 S60 程序 中 。PNG 它 是 一 种 在 网 页 设计 中 常见 的 格式 ， 并 且 支 持 透明 背景 显示 ， 相 同 图 像 相 
比 其 他 两 种 格式 体积 稍 大 。 如 图 1.7 所 示 为 三 种 不 同 格式 的 显示 效果 。 


图 1.7 ”不 同 格式 的 显示 效果 


16 ”智能 手机 操作 系统 简介 


现今 主流 的 智能 手机 操作 系统 主要 有 Android、iOS 和 Windows Phone 三 类 ， 这 三 类 系统 都 有 各 自 的 特点 。 


Android: 中 文 名 称 为 安 早 ，Android 是 一 个 基于 开放 源 代码 的 Linux 平 台 衍 生 而 来 的 操作 系统 ，Android 最 初 是 由 一 家 小 型 
公司 所 创建 ， 后 来 被 谷歌 收购 ， 它 也 是 当下 最 为 流行 的 一 款 智能 手机 操作 系统 。 其 显著 特点 在 于 ， 它 是 一 款 基 于 开放 源 代码 的 操 


作 系 统 ， 这 人 句 话 可 以 理解 为 它 相 比 其 他 操作 系统 具有 起 强 的 可 扩展 性 。 如 图 1.8 所 示 为 濠 载 Android 操 作 系统 的 手机 。 


图 1.8 ”装载 Android 操 作 系 统 的 手机 


IOS: 源 目 症 果 公司 MAC 机 器 妆 载 的 O9 X 系 统 友 展 而 来 的 一 球 智 能 操作 系统 ， 目 前 最 新 版 本 为 7.0， 此 蒜 操 作 系 统 是 苹果 公 
司 独家 开 友 并 且 只 使 用 于 目 家 的 ijPhon、iPod Touch、iPad 等 设备 上 。 相 比 其 他 智能 手机 操作 系统 ，1OS 智 能 手机 操作 系统 的 流 
畅 性 、 完 美的 优化 及 安全 等 特性 是 其 他 操作 系统 无 法 比拟 的 ， 不 过 由 于 它 是 及 用 封闭 源 代码 开发 ， 所 以 在 拓展 性 上 要 略 显 还 色 ，。 
如 图 1.9 所 示 为 苹果 公司 生产 的 装载 |0S 智 能 操作 系统 的 设备 。 
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图 1.9 ”装载 [OS 智能 操作 系统 的 设备 


Windows Phone (简称 : WP) : WP 是 微软 发 布 的 一 款 移动 操作 系统 ， 它 是 一 款 十 分 年 轻 的 操作 系统 ， 相 比 其 他 操作 系统 
而 言 具 有 桌面 定制 、 图 标 拖 搜 、 滑 动 控制 等 一 系列 前 卫 的 操作 体验 。 由 于 该 操作 系统 是 初 入 智能 手机 市 场 ， 所 以 在 份额 上 暂时 无 
法 与 安 卓 和 1OS 相 比 。 但 更 是 因为 其 比较 年 轻 ， 才 有 很 多 新 奇 的 功能 及 操作 ， 同 时 也 是 因为 源 自 微软 ， 在 与 PC 端的 Windows 操 
作 系 统 互通 性 上 占有 很 大 的 优势 。 如 图 1.10 所 示 为 装载 Windows Phone 的 几 款 智能 手机 。 


图 1.10 ”装载 Windows Phone 的 几 款 智能 手机 


1.7 设计 利用 的 软件 


如 今 UI 设 计 中 常用 的 软件 有 Adobe 公 司 的 Photoshop 和 lllustrator，Corel 公 司 的 Corel[DRAW 等 ， 主 要 以 Photoshop 和 
llustrator 为 主 。 


1.Photoshop 
Photoshop 是 集 图 像 扫 摘 、 编 辑 修改 、 图 像 制 作 、 广 告 创 晶 、 图 像 输 入 与 输出 于 一 体 的 图 形 图 像 处理 软 件 ， 深 受 广大 平面 
设计 人 员 和 电脑 美术 爱好 者 的 喜爱 。 


Photoshop 的 专长 在 于 图 像 处 理 ， 而 不 是 图 形 创 作 ， 有 必要 区 分 一 下 这 两 个 概念 。 图 像 处 理 是 对 已 有 的 位 图 图 像 进行 编辑 
加 工 处 理 以 及 运用 一 些 特 殊 效 果 ， 其 重点 在 于 对 图 像 的 处 理 加 工 ; 图 形 创作 软件 是 按照 自己 的 构思 创意 ， 使 用 矢量 图 形 来 设计 图 
形 ， 这 类 软件 主要 有 Adobe 公 司 的 另 一 个 著名 软件 lllustrator 和 Macromedia 公 司 的 Freehand， 不 过 Freehand 已 经 快要 淡出 历 
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平面 设计 是 Photoshop 应 用 最 为 广泛 的 领域 ， 无 论 是 我 们 正在 阅读 的 图 书 封面 ， 还 是 大 街 上 看 到 的 招 帖 、 海 报 ， 这 些 具有 
富 图 像 的 平面 印刷 品 ， 基 本 上 都 需要 Photoshop 软 件 对 图 像 进行 处 理 。 


2.lllustrator 
lllustrator 是 美国 Adobe 公 司 推出 的 专业 矢量 绘图 工具 ， 是 出 版 、 多 媒体 和 在 线 图 像 的 工业 标准 矢量 插画 软件 。 


无 论 是 生产 印刷 出 版 线 稿 的 设计 者 和 专业 插画 家 、 生 闫 多 媒体 图 像 的 艺术 家 ， 还 是 互联 网 页 或 在 线 内 容 的 制作 者 ， 都 会 友 现 
咱 ustrator 不 仅仅 是 一 个 艺术 产品 工具 ， 还 适用 于 大 部 分 小 型 设计 到 大 型 的 复杂 项 目 。 


3.CorelDRAW 


CorelDRAW 是 集 矢量 图 形 设 计 、 矢 量 动画 、 页 面 设 计 、 网 站 制作 、 位 图 编辑 、 印 刷 排版 、 文 字 编 辑 处 理 和 图 形 高 品质 输出 
于 一 体 的 平面 设计 软件 ， 深 受 广 大 平面 设计 人 员 的 喜爱 ， 目 前 主要 在 广告 制作 、 图 书 出 版 等 方面 得 到 广泛 的 应 用 ， 功 能 与 其 类 似 
的 软件 有 lllustrator、Freehand,。 


CorelDRAW 是 一 款 屡 获 殊 茶 的 图 形 、 图 像 编辑 软件 ， 它 包含 两 个 绘图 应 用 程序 : 一 个 用 于 天 量 图 及 页 面 设 计 ; 一 个 用 于 图 
像 编 辑 。 这 赤 绘 图 软件 组 合 可 以 创作 出 多 种 图 形 图像 效 果 ， 在 简单 的 操作 中 残 可 得 到 实现 ， 并 且 不 会 丢失 当前 的 工作 。 通 过 
CoreldRAW 全 方位 的 设计 及 网 页 功能 可 以 融合 到 用 户 现 有 的 设计 方案 中 ， 灵 活性 十 足 。 


对 于 目前 流行 的 UI 界面 设计 ， 由 于 没有 具有 针对 性 的 专业 设计 软件 ， 所 以 大 部 分 设计 师 会 选择 使 用 这 三 款 软件 来 制作 UI 界 
面 ， 如 图 1.11 所 示 。 
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图 1.11 三 款 软件 的 界面 效果 


1.8 UI 设计 原则 


Ul 设计 是 一 个 系统 化 整套 的 设计 工程 ， 看 似 人 简单 ， 其 实 不 然 ， 在 这 套 “ 设 计 工程 ”中 一 定 要 按照 设计 原则 进行 设计 。UI 设 
计 原 则 主要 有 以 下 几 扎 。 


1. 人 简易 性 


在 整个 Ul 设计 的 过 程 中 一 定 要 注意 设计 的 简易 性 ， 界 面 设计 要 简洁 、 易 用 ， 并 能 最 大 程度 地 减少 选择 性 的 错误 。 


2. 一 致 性 


出 色 的 应 用 应 广 拥 有 一 个 优秀 的 界面 ， 这 也 是 所 有 优秀 应 用 界面 设计 应 当 具 备 的 特点 。 一 天 应 用 中 的 界面 设计 必须 保证 视觉 
交互 的 一 致 性 ， 同 时 与 整体 风格 保持 相同 。 


3. 提 升 用 尸 的 熟知 度 


用 户 在 第 一 时 间 内 接触 到 界面 时 必须 是 之 前 所 接触 到 或 者 已 掌握 的 知识 ， 新 的 应 用 绝对 不 能 超过 一 般 单 识 ， 比 如 无 论 是 拟 物 
化 的 写实 图 标 设计 还 是 局 平 化 的 界面 都 要 以 用 尸 所 疯 握 的 知识 为 基准 。 


4. 可 控 性 
在 设计 之 初 就 要 考虑 到 用 户 想 要 做 什么 ， 需 要 做 什么 ， 而 此 时 在 设计 中 就 要 加 入 相应 的 操控 提示 。 
5. 记 性 负担 最 小 化 


一 定 要 科学 分 配 应 用 中 的 功能 说 明 ， 力 求 操作 最 简化 ， 从 人 脑 的 思维 模式 出 及 ， 不 要 打破 传统 的 思维 方式 ， 不 要 给 用 户 增加 
思维 负担 。 


6. 从 用 户 的 角度 考虑 


想 用 尸 所 想 ， 思 用 尸 所 思 ， 人 研究 用 尸 的 行为 。 因 为 大 多 数 的 用 己 是 不 具备 专业 知识 的 ， 他 们 往往 只 习惯 于 从 上 自身 的 行为 习惯 
出 上 友 进 行 思 考 和 操作 ， 在 设计 的 过 程 中 把 目 己 当 作 用 户 ， 以 切身 体会 去 设计 。 


按 一 定 规律 进行 排列 ， 一 方面 可 以 让 用 户 在 极 短 的 时 间 内 找到 目 己 需要 的 功能 ， 另 一 方面 也 可 以 拥有 直观 的 简洁 易 用 的 感 


MB 


8. 安 全 性 


无 论 任何 应 用 ， 在 用 户 进行 目 由 操作 时 ， 他 所 做 出 的 这 些 动 作 都 应 该 是 可 逆 的 ， 比 如 在 用 户 做 出 一 个 不 恰当 的 或 错误 操作 
时 ， 应 当 有 危险 信息 介入 。 


快速 、 高 效率 及 整体 满意 度 在 用 户 看 来 都 是 人 性 化 的 体验 ， 在 设计 过 程 中 需要 尽 可 能 地 考虑 到 特殊 用 户 群 体 的 操作 体验 ， 比 
如 残疾 人 、 色 讶 、 语 言 障碍 者 等 ， 在 这 一 点 可 以 在 IOS 操 作 系统 上 得 到 最 直观 的 感受 。 


139 ”GUI 设计 过 程 中 的 表现 力 

前 面 已 经 讲 过 ，GUI 表 示 图 形 界面 设计 ， 直 观 来 讲 就 是 产品 外 观 设计 ， 在 一 款 应 用 达到 一 定 功能 的 基础 上 应 该 使 产品 更 具有 
个 性 与 美观 性 ， 这 也 是 吸引 用 户 眼 球 的 首要 环节 。 

现今 的 Ul 设计 中 ，GUI 主 要 由 两 部 分 组 成 ， 即 图 标 (icon) 设计 和 界面 (interface) 设计 。 


1. 图 标 (icon) 


图 标 能 够 将 产品 或 应 用 的 功能 信息 快速 传达 给 用 户 ， 并 且 获 得 展 好 的 视 党 体验 ， 在 整个 应 用 中 具有 一 定 的 价值 ， 并 且 还 能 够 
强调 产品 的 重要 特点 ， 向 用 户 传 达 操 作 重 点 。 


图 标 还 具有 以 下 几 个 特点 : 


' 可 以 减轻 对 应 用 的 认识 人 负担， 尤其 对 于 复杂 的 应 用 效果 十 分 明显 ，; 


` 增强 人 机 交互 的 乐趣 ， 不 会 显得 空洞 乏味 ; 


` 统一 的 图 标 风格 还 能 够 增强 用 户 的 记忆 。 


图 标的 表现 技法 如 下 。 


: 光 感 表现 (玻璃 球 ) 如 图 1.12 所 示 。 


图 1.12 ”玻璃 球 光 感 


. 质感 表现 (金属 云 ) 如 图 1.13 所 示 。 


图 1.13 ”金属 云 质 感 


2. 界 面 (interface) 


界面 设计 是 整个 UI 设计 中 的 精华 所 在 ， 它 与 人 机 交互 体验 同 为 重要 的 组 成 部 分 。 界 面 不 只 是 一 味 地 追求 华丽 ， 在 设计 的 过 
程 中 需要 从 产品 定位 入 手 ， 从 写实 风格 的 界面 到 局 平 化 的 界面 都 应 该 以 产品 及 用 户 为 中 心 。 


界面 的 表现 技法 如 下 。 


流行 风格 界面 (android) 如 图 1.14 所 示 。 
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图 1.15 ”局 平 风格 界面 
提示 与 技巧 
旱 期 的 手机 UI 界 面 受 限于 屏幕 尺寸 、 硬 件 及 操作 系统 等 原因 ， 并 不 像 今天 流行 的 界面 如 此 好 看 ， 分 辩 率 低 、 屏 幕 过 小 给 用 


户 的 视觉 感受 比较 一 般 ， 如 图 1.16 所 示 。 
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图 1.16” 低 分 辩 率 、 小 屏幕 效果 


1.10 ”提升 Android 视 竞 效 果 的 设计 技巧 


图 形 界 面 设计 重心 还 是 在 最 终 的 用 尸 直 观感 受 上 ， 无 论 交互 的 工作 做 得 如 何 完美 ， 这 些 都 不 会 影响 到 用 户 对 界面 的 视 完 感 
， 或 诗 用 尸 只 会 完 得 这 球 应 用 设计 比较 合理 、 易 用 。 以 下 是 关于 提升 Android 视 党 效果 设计 的 技巧 。 


dB 


1. 确 定 适 当 大 小 的 图 像 


在 图 像 添加 方面 ， 许 多 应 用 开 妈 者 通 单 习 惯 采 用 大 小 单一 的 做 法 ， 虽 然 这 样 做 会 使 资源 管理 变 得 更 简单 ， 但 是 残 应 用 的 视觉 
吸引 力 而 言 ， 这 种 做 法 是 不 太 恰 当 的 。 应 当 针对 不 同 的 屏幕 ， 在 应 用 图 像 制 作 过 程 中 ， 保 证 图 像 大 小 的 对 上 应， 这样 才 可 以 生成 最 
合适 的 图 像 以 达到 最 佳 的 用 户 体验 。 


2. 使 用 适当 格式 的 图 像 


有 时 在 使 用 一 秋 应 用 的 过 程 中 ， 由 于 图 像 的 原因 一 直 企 加 载 ， 这 不 仅仅 是 因为 图 像 的 大 小 仔 在 侦 差 ， 还 有 可 能 是 因为 图 像 采 
用 了 非 理 想 的 格式 。Android 平 台 支 持 多 种 媒体 格式 ， 比 如 PNG、JPEG、GIF、BMP 等 ， 除 了 过 时 的 格式 之 外 ， 选 取 具 有 针对 
性 的 图 片 格式 才能 达到 理想 的 应 用 效果 。PNG 是 无 损 图 片 的 理想 格式 ， 而 JPEG 的 呈现 质量 并 不 稳定 。 


3 .运用 微妙 动画 颜色 来 呈现 状态 改变 


在 屏幕 转 场 时 运用 微妙 动画 以 及 色彩 变化 来 呈现 应 用 状态 改变 ， 会 让 应 用 更 显 专业 ， 比 如 在 切换 一 二 级 页 面 的 时 候 加 入 动态 
的 淡 入 /淡出 效果 ; 在 凶 载 当前 应 用 时 加 入 高 斯 模糊 效果 等 元 素 都 可 以 为 应 用 加 分 。 注 意 ， 在 添加 转 场 效果 时 ， 一 定 要 与 当前 应 
用 相 匹 配 。 


4. 注 意 配色 方案 中 的 对 比 度 


当 用 户 在 首次 使 用 应 用 时 ， 是 一 种 黑 蓝 的 高 对 比 度 配色 万 案 ， 而 在 后 面 的 使 用 过 程 中 骨 次 接触 到 是 浅 色 系 或 日 色色 系 ， 残 会 
导致 视 客 上 的 不 明确 ， 可 能 会 造成 屏幕 内 容 的 阅读 困难 。 使 用 适当 的 高 对 比 度 颜色 可 以 让 屏幕 更 易于 查看 。 


5. 使 用 易 读 的 字体 


与 配色 方案 相同 ， 在 字体 使 用 上 应 尽量 与 应 用 相 匹 配 。 如 果 在 手机 中 的 邮箱 应 用 上 得 看 对 方 友 过 来 的 邮件 ， 过 小 或 过 于 少见 
的 字体 束 会 造成 阅读 困难 ， 因 此 ， 在 字体 采用 上 也 应 该 遵循 易 读 的 原则 。 


6. 严 守 平台 规 沁 


每 一 款 成 功 的 手机 应 用 都 会 使 用 人 们 较为 熟悉 的 用 尸 界面 。 它 们 有 简单 且 主 流 的 用 户 界 面 ， 米 用 了 用 户 所 熟悉 的 控制 方式 。 
在 用 户 界面 控制 和 屏幕 设计 中 ， 与 平台 其 他 应 用 的 表现 保持 一 致 ， 以 平台 作为 决定 应 用 表现 。 


7. 测 试用 尸 界 面 


最 优秀 的 开 上 友 痢 也 无 法 得 到 用 户 的 使 用 或 体验 反馈， 当 应 用 称 定 运行 时 ， 面 向 完全 不 玖 悉 应 用 设计 和 意图 的 用 户 开 展 深入 测 
试 是 十 分 正确 的 做 法 。 只 有 做 好 了 用 户 测试 这 项 重要 的 工作 之 后 ， 才 能 够 在 发 布 应 用 前 发 现 许多 意料 之 外 的 问题 。 


1.11 免费 的 UI 设 计 工 具 、 贷 源 及 网 站 


在 设计 工作 中 ， 如 果 能 有 强大 的 工具 、 资 源 供 你 利用 的 话 ， 那 么 整个 设计 工作 必 将 事半功倍 ， 下 面 这 些 免费 的 UI 设 计 工 
具 、 资 源 及 网 站 可 以 在 设计 过 程 中 助 你 一 臂 之 力 。 


1.Lumzy (http://www.lumzy.com/) 


Lumzy 是 一 个 网 站 应 用 和 原型 界面 制作 工具 ， 使 用 Lumzy 可 以 轻松 创建 UI 模型 并 即时 发 送 到 客户 电脑 中 ，Lumzy 还 具有 团 
队 协 作 编 辑 工 具 ， 如 图 1.17 所 示 。 
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图 1.17 Lumzy 


2.Mockingbird (https://gomockingbird.com) 


Mockingbird (RS) 是 一 个 在 线 工 具 ， 它 可 以 轻松 地 创建 Ul 界 面 模型 并 预览 ， 如 图 1.18 所 示 。 
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图 1.18 Mockingbird ( # + 5, ) 
3.The Pencil Project (http://pencil.evolus.vn/en-US/Home.aspx) 


The Pencil Project 为 设计 图 表 和 用 户 界 面 图 形 原 型 开发 的 一 个 自由 和 开源 工具 ， 如 图 1.19 所 示 。 
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图 1.19 The Pencil Project 


4.Serena Prototype Composer (http://www.serena.com/products/prototype-composer/index.html) 


Serena Prototype Composer 是 制作 流程 图 ， 模 拟 程序 流程 和 用 户 界面 设计 程序 。 
5.Cacoo (http://cacoo.com)/) 


Cocoo 是 一 个 用 尸 友 好 的 在 线 绘图 工具 ， 人 允许 你 创建 一 个 如 网 站 地 图 、 线 框 、UML 和 网 络 图 等 。 


1.12 色彩 学 基础 知识 


己 很 多 设计 相同 ， 在 Ul 设计 中 也 十 分 注重 色彩 的 搭配 ， 想 要 为 界面 搭配 出 专业 的 色彩 ， 束 需要 对 色彩 学 基础 知识 有 所 了 
。 下 面 丈 为 大 家 讲解 关于 色彩 学 的 基础 知识 ， 希 望 通过 对 这 些 知 识 的 了 解 与 学 习 可 以 为 UI 设计 之 路 添砖加瓦 。 


c 
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1. 颜 色 的 概念 


树叶 为 什么 是 绿色 的 ”树叶 中 的 叶绿素 大 量 吸收 红 光 和 监 光 ， 而 对 绿 光 吸收 最 少 ， 大 部 分 绿 沧 航 反射 出 来 进入 人 眼 ， 人 融 看 
到 绿色 。 


“绿色 物体 ”反射 绿 论 ， 吸 收 其 他 色光 ， 因 此 看 上 去 是 绿色 。“ 日 色 物 体 ” 反 射 所 有 色光 ， 因 此 看 上 去 是 日 色 。 


产 色 其 实 是 一 个 非 芝 主 观 的 概念 ， 不 同 动物 的 视 部 系统 不 同 ， 看 到 的 颜色 融会 不 一 样 。 比 如 ， 蝶 有 眼 不 但 能 察 沉 可见光， 而 且 
还 能 感应 红外 绕 ， 因 此 蝶 眼 看 到 的 颜色 惑 与 人 眼 不 同 。 界 面 颜 色 效果 如 图 1.22 所 示 。 


党 


图 1.22 ”界面 闫 色 效 果 


2. 色 彩 三 要 素 
色彩 三 要 素 包 括 色 相 、 饮 和 度 和 明度。 
色相 


色相 又 称 色调 ， 色 相 是 一 种 颜色 区 别 于 另外 一 种 颜色 的 特征 ， 日 常生 活 中 所 接触 到 的 “ 红 ”“ 绿 ”“ 赣 ” 玖 是 指 色 彩 的 色 
相 。 色 相 两 端 分 别 是 暖色 、 冷 色 ， 中 间 为 中 间 色 或 中 性 色 。 在 0 ~ 360° 的 标准 色 环 上 ， 按 位 置 度量 色相 ， 如 图 1.23 所 示 。 色 相 体 
现 着 色彩 外 向 的 性 格 ， 是 色彩 的 灵魂 。 


着 车 — 


图 1.23 色相 及 色相 环 
饱和 度 


饱和 度 是 指 色彩 的 强度 或 纯净 程度 ， 也 称 彩 度 、 纯 度 、 艳 度 或 色 度 。 对 色彩 的 饱和 度 进行 调整 ， 也 束 是 调整 图 像 的 彩 度 。 饮 
和 度 表示 色 相 中 灰色 分 量 所 占 的 比例 ， 它 使 用 从 0% (灰色 ) ~ 100% 的 百分比 来 度量 ， 当 饱和 度 降 低 为 0 时 ， 则 会 变 成 一 个 灰色 
图 像 ， 增 加 饱和 度 会 增加 其 彩 度 。 在 标准 色 轮 上 ， 饱 和 度 从 中 心 到 边 绿 递增 。 饱 和 度 受 到 屏幕 亮度 和 对 比 度 的 双重 影响 ， 一 般 亮 
度 好 对 比 度 高 的 屏 幕 可 以 得 到 很 好 的 色 饱 和 度 ， 如 图 1.24 所 示 。 


图 1.24 不 同 饱 和 度 效 果 


明度 


明度 是 指 色 彩 的 明暗 程度 ， 有 时 也 可 称 为 亮度 或 深浅 度 。 在 无 彩色 中 ， 最 高 明度 为 日 色 ， 最 低 明 度 为 黑色 。 在 有 彩色 中 ， 任 
何 一 种 色相 中 都 有 着 一 个 明度 特征 。 不 同色 相 的 明度 也 不 同 ， 黄 色 为 明度 最 高 的 色 ， 紫 色 为 明度 最 低 的 色 。 任 何 一 种 色相 如 加 入 
日 色 ， 都 会 提高 明度 ， 日 色 成 分 越 多 ， 明 度 也 就 越 高 ， 任 何 一 种 色相 如 加 入 黑色 ， 明 度 相对 降低 ， 黑 色 越 多 ， 明 度 越 低 ， 如 图 


1.25 所 示 。 


明度 是 全 部 色彩 都 有 的 属性 ， 明 度 关 系 可 以 说 是 搭配 色彩 的 基础 ， 在 设计 中 ， 明 度 最 适宜 于 表现 物体 的 立体 感 与 空间 感 。 


图 1.25 ”明度 效果 
3. 加 法 混 色 
原色 又 称 为 基色 ， 三 基色 (三 原色 ) 是 指 红 (R) 、 绿 (G) 、 监 (B) 三 色 ， 是 调配 其 他 色彩 的 基本 色 。 原 色 的 色 纯 度 最 
局 、 最 纯净 、 最 鲜艳 ， 可 以 调配 出 绝 大 多 数 色彩 ， 而 其 他 颜色 不 能 调配 出 三 原色 ， 如 图 1.26 所 示 。 


加 色 三 原色 基于 加 色 法 原理 。 人 的 眼睛 是 根据 所 看 见 的 光 的 波长 来 识别 颜色 的 ， 可 见 光谱 中 的 大 部 分 颜色 可 以 由 三 种 基本 色 
光 按 不 同 的 比例 混合 而 成 ， 这 三 种 基本 色光 的 颜色 就 是 红 (Red) 、 绿 (Green) 、 监 (Blue) 三 原色 光 。 这 三 种 光 以 相同 的 比 
例 混 合 ， 且 达到 一 定 的 强度 ， 束 呈现 日 色 ; 名 三 种 区 的 强度 均 为 零 ， 融 是 黑色 。 这 融 是 加 色 法 原理 ， 加 色 法 原理 被 广泛 应 用 于 电 
视 机 、 监 视 器 等 主动 友 光 的 产品 中 。 


RGB 混合 效果 RGB 色 标 样本 (% ) 


R255 #R255 #R255 R255 
G0 G60 G120 G200 
BO B60 B120 B200 


RO R60 
G255 G255 
BO B60 


R120 
G255 
B120 


R120 
G120 
B255 


R120 
G120 
B120 


RO R60 
G0 G60 
B255 县 B255 


RO R60 
GO G60 
BO B60 


R255 YE R200 
G0 G100 G255 
B255 274 B200 


RO R100 #/ “ 
G255 G255 G200 
B255 B2595 B255 


R100 R200 
G100 G200 
B50 B200 


图 1.26 三 原色 及 色 标 样本 
4. 减 法 混 色 


减 色 原 色 是 指 一 些 颜 料 ， 当 按照 不 同 的 组 合 将 这 些 颜料 添加 在 一 起 时 ， 可 以 创建 一 个 色谱 。 减 色 原 色 基 于 减 色 法 原理 。 与 显 
示 器 不 同 ， 在 打印 、 印 刷 、 油 漆 、 绘 画 等 靠 介质 表面 的 有 反射 悦动 友 光 的 场合 ， 物 体 所 呈现 的 颜色 是 光源 中 被 颜料 吸收 后 所 剩余 的 
部 分 ， 所 以 其 成 色 的 原理 叫做 减 色 法 原理 。 打 印 机 使 用 减 色 原 色 (青色 、 洋 红色 、 黄 色 和 黑色 颜料 ) 并 通过 减 色 混合 来 生成 颜 
色 。 减 色 法 原理 锌 广泛 应 用 于 各 种 被 动 友 光 的 场合 。 在 减 色 法 原理 中 的 三 原色 颜料 分 别 是 青 (Cyan) 、 品 红 (Magenta) 和 黄 
(Yellow) ， 如 图 1.27 所 示 。 通 党 所 襄 的 CMYK 模 式 束 是 其 于 这 种 原理 。 


CMYK 混 合 效 果 CMYK 色 标 样 本 (%) 


C100 # C50 C50 
K100 K20 M50 M100 # M50 
Y100 R Y100 R Y50 


图 1.27 CMYK 混 合 效 果 及 色 标 样本 


C20 


5. 补 色 


两 种 颜色 混合 在 一 起 产生 中 性 色 ， 则 称 为 这 两 种 颜色 互 为 补 色 。 补 色 是 指 两 种 混合 后 会 产生 日 色 的 颜色 ， 比 如 ， 红 + 绿 + 监 
= 日 ， 红 + 绿 = 黄 ， 黄 + 监 = 日 ， 因 此 ， 黄 色 是 蓝 色 的 补 色 ，。 


对 于 颜料 ， 补 色 是 渴 合 后 产生 黑色 的 颜色 ， 比 如， 红 + 赣 + 黄 = 黑 ， 黄 + 蓝 = 绿 ， 因 此 ， 红 色 是 绿色 的 补 色 。 
在 色 环 上 相对 的 两 种 颜色 互 为 补 色 ， 一 种 颜色 与 其 补 色 是 强烈 对 比 的 ， 补 色 措 配 会 产生 强烈 的 视 癌 效果 。 


6. 芒 塞 尔 色彩 系统 (Munsell color system) 


人 们 通 单 摘 述 颜色 是 模糊 的 ， 比 如 齐 绿 色 、 嫩 绿 等 ， 事 实 上 不 同人 对 于 “草绿 色 ” 的 理解 又 有 细微 的 差异 ， 因 此 ， 残 需要 一 
种 精确 摘 述 颜色 的 系统 。 


芒 塞 尔 色 彩 系统 由 美国 教授 A.H.Munsell 在 20 世 纪 初 提出 ， 芒 塞 尔 色彩 系统 提供 了 一 种 数值 化 的 精确 描述 颜色 的 方法 ， 该 系 
统 使 用 色相 (Hue) 、 纯 度 (Chroma) . BBEZ (Value) 三 个 维度 来 表示 色彩 ， 如 图 1.28 所 示 。 


` 色相 分 为 红 (R) 、 红 黄 (YR) 、 黄 (Y) 、 黄 绿 (GY) 、 绿 (G) 、 绿 蓝 (BG) 、 蓝 (B) 、 蓝 兹 (PB) . £ (P) 、 


紫红 (RP) 这 5 种 主 色 调 与 5 种 中 间 色 调 ， 其 中 每 种 色调 又 分 为 10 级 (1~10) ， 其 中 第 5 级 是 该 色调 的 中 间 色 。 
明度 分 为 11 级 ， 数 值 越 大 ， 表 示 明 度 越 高 ， 最 小 值 是 0 (黑色 ) ， 最 大 值 是 10 (和 白色) 。 
. 纯度 最 小 值 是 0， 理 论 上 没有 最 大 值 。 数 值 越 大 ， 表 示 纯 度 越 纯 。 


Value Munsell Color System 


— Hue 


Chroma 
| Yellow-Red 


Ë Red 
Red-Purple Vall 


Green-Yellow 


Purple-Blue Blue 


Blue-Green 


1.13  UI 设 计 音 见 配色 方案 


只 有 控制 好 构成 整体 色调 的 色相 、 明 度 、 纯 度 天 系 和 面积 关系 等 ， 才 能 控制 好 我 们 设计 的 整体 色调 ， 通 剃 这 是 一 整套 的 色彩 
结构 并 且 是 有 规律 可 循 的。 通过 下 面 几 种 常见 的 配色 万 案 束 比较 容易 找到 这 种 规律 。 


. 单 色 搭 配 : 由 一 种 色相 的 不 同 明度 组 成 的 搭配 ， 这 种 搭配 很 好 地 体验 了 明暗 的 层次 感 。 单 色 搭 配 效 果 如 图 1.29 所 示 。 


图 1.29 单 色 搭配 效果 


近似 色 搭 配 : 相 邻 的 二 或 三 种 颜色 称 为 近似 色 ， 这 种 搭配 比较 让 人 沉 心 悦 目 ， 低 对 比 度 ， 较 和 谐 。 近 似 色 搭配 效果 如 图 


1.30 所 示 。 


图 1.30 ”近似 色 搭 配 效果 


“ 补 色 搭配 : 色 环 中 相对 的 两 个 色相 搭配 。 顾 色 对 比 强烈 ， 传 达能 量 、 活 力 、 兴 奋 等 意图 ， 补 色 中 最 好 让 一 个 顾 色 多 ， 一 个 
颜色 少 。 补 色 搭 配 效果 如 图 1.31 所 示 。 
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图 1.31 补 色 搭配 效果 


:分裂 补 色 搭配 : 同时 用 补 色 及 类 比 色 的 方法 确定 颜色 关系 ， 就 称 为 分 裂 补 色 。 这 种 搭配 ， 既 有 类 比 色 的 低 对 比 度 ， 又 有 和 补 
色 的 力量 感 ， 形 成 一 种 即 和 谐 又 有 重点 的 颜色 关系 。 分 裂 补 色 搭配 效果 如 图 1.32 所 示 。 


图 1.32 ”分裂 补 色 搭配 效果 


. 原色 的 搭配 : 色彩 明快 ， 如 蓝 红 搭配 。 原 色 的 搭配 效果 如 图 1.33 所 示 。 


图 1.33 原色 的 搭配 效果 


1.14 ”UI 设计 色彩 学 


1. 色 彩 与 生活 


色彩 残 像 是 我 们 的 味 竞 ， 一 样 的 材料 因为 用 了 不 同 的 调料 而 有 了 不 同 的 味道 ， 成 功 的 好 吧 ， 失 败 的 往往 叫 人 难以 下 咽 ， 而 色 
彩 对 生理 与 心理 都 有 很 大 的 影响 ， 如 图 1.34 所 示 。 


图 1.34 ”色彩 与 生活 


2. 色 彩 意象 
当 我 们 看 到 色彩 时 ， 除 了 会 感觉 其 物理 方面 的 影响 ， 心 里 也 会 立即 产生 感觉 ， 这 种 感觉 我 们 一 般 难 以 用 言语 形容 ， 我 们 称 之 


为 印象 ， 也 残 是 色彩 意象 。 下 面 束 是 色彩 意象 的 具体 说 明 。 
红色 的 色彩 意象 


由 于 红色 容易 引起 注意 ， 所 以 在 各 种 媒体 中 也 被 广泛 应 用 。 红 色 除 了 有 具有 较 佳 的 明 视 效果 之 外 ， 还 被 用 来 传达 有 活力 、 积 
极 、 热 碱 、 温 暖 、 前 进 等 全 义 的 企业 形象 与 精神 。 另 外 ， 红 色 也 单 用 来 作为 警告 、 和 危险 、 系 止 、 防 火 等 标示 用 色 ， 人 们 在 一 些 公 
共 场 合 或 物品 上 看 到 红色 标示 时 ， 通 弟 不 必 仔 细 阅 读 内 容 ， 残 能 了 解 警告 、 危 险 之 意 ; 在 工业 安全 用 色 中 ， 红 色 即 是 警 告 、 危 
人 允 、 系 止 、 防 火 的 所 定 色 。 和 弟 见 红色 为 大 红 、 桃 红 、 砖 红 、 玫 瑰 红 。 红 色 APP 如 图 1.35 所 示 。 
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图 1.35 ”红色 APP 
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有 了 时 会 使 人 有 负面 、 低 俗 的 意象 ， 这 种 状况 尤其 容易 友 生 在 服饰 的 运用 上 ， 所 以 在 运用 禁 色 时 ， 要 注意 选择 搭配 的 色彩 和 表现 方 
式 ， 才 能 把 梯 色 明亮 、 活 泼 的 特性 友 挥 出 来 。 常 见 榜 色 为 鲜 柱 、 权 樟 、 朱 检 。 榜 色 APP 如 图 1.36 所 示 。 
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图 1.36 ”橙色 APP 


黄色 的 色彩 意象 


黄色 明 视 度 高 ， 在 工业 安全 用 色 中 ， 黄 色 即 是 警 告 危 险 色 ， 常 用 来 警告 危险 或 提醒 注意 ， 如 工程 用 的 大 型 机 器 、 学 生 雨 衣 、 
雨鞋 等 。 单 见 黄色 为 大 黄 、 柠 柑 黄 、 柳 本 黄 、 米 黄 。 黄 色 APP 如 图 1.37 所 示 。 


OH 


图 1.37 黄色 APP 


绿色 的 色彩 意象 


在 商业 设计 中 ， 绿 色 所 传达 的 是 清爽 、 理 想 、 希 望 、 和 后 长 的 意象 ,符合 服务 业 、 卫 生 保 健 业 的 诉求 。 在 工厂 中 为 了 避免 操作 
时 眼睛 疲 芳 ， 许 多 工作 的 机 械 也 是 及 用 绿色 ;一 般 的 医疗 机 构 场 所 ， 也 韶 采 用 绿色 来 作为 空间 色彩 规划 即 标示 医疗 用 品 。 常 见 绿 
色 为 大 绿 、 垒 绿 、 橄 榴 绿 、 墨 绿 。 绿 色 APP 如 图 1.38 所 示 。 
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图 1.38 绿色 APP 


诈 色 的 色彩 意象 


由 于 蓝 色 沉稳 的 特性 ， 具 有 理智 、 准 确 的 意象 ， 在 商业 设计 中 ， 强 调 科 技 、 效 率 的 商品 或 企业 形象 ， 大 多 选用 监 色 作为 标准 
色 、 企 业 色 ， 如 电脑 、 汽 车 、 影 印 机 、 摄 影 器 材 等 。 另 外 ， 赣 色 也 代表 忧郁 ， 这 是 受 了 西方 文化 的 影响 ， 这 个 意象 也 运用 在 文学 
作品 或 感性 诉求 的 商业 设计 中 。 弟 见 监 色 为 大 监 、 天 赣 、 水 监 、 深 监 。 监 色 APP 如 图 1.39 所 示 。 


图 1.39 ” 蓝 色 APP 


紫色 的 色彩 意象 


由 于 具有 强烈 的 女性 化 性 格 ， 在 商业 设计 用 色 中 ， 蛇 色 也 受到 相当 的 限制 ， 除 了 和 女性 有 关 的 商品 或 企业 形象 之 外 ， 其 他 类 
的 设计 不 党 及 用 为 主 色 。 常 见 紫 色 为 大 紧 、 贵 族 紫 、 葡 萄 酒 紫 、 深 凤 。 蛇 色 APP 如 图 1.40 所 示 。 


褐色 的 色彩 意象 


在 商业 设计 中 ， 褐 色 通 常用 来 表现 原始 材料 的 质感 ， 如 打 、 木 材 、 竹 片 、 软 木 等 ， 或 者 用 来 传达 某 些 饮品 原料 的 色泽 即 味 
感 ， 如 咖啡 、 茶 、 妾 类 等 ， 或 者 强调 格调 古典 优雅 的 企业 或 商品 形 销 。 常 见 褐色 为 茶色 、 可 可 色 、 妾 芽 色 、 原 木 色 。 褐 色 APP 如 
图 1.41 所 示 。 


图 1.41 28 6 APP 
白色 的 色彩 意象 


在 商业 设计 中 ， 日 色 具 有 高 级 、 科 技 的 意象 ， 通 常 需 和 其 他 色彩 搭配 使 用 。 纯 日 色 会 市 给 人 塞 冷 、 严 峻 的 感 听 ， 所 以 在 使 用 
日 色 时 ， 都 会 渴 合 一 些 其 他 的 色彩 ， 如 象牙 白 、 米 日 、 乳 白 、 苹 果 日 等 。 在 生活 用 品 及 服饰 用 色 上 ， 日 色 是 永远 流行 的 主要 颜 
色 ， 可 以 和 任何 颜色 搭配 。 日 色 APP 如 图 1.42 所 示 。 


图 1.42 ”白色 APP 


黑色 的 色彩 意象 


在 商业 设计 中 ， 黑 色 具 有 局 贵 、 稳 重 、 科 技 的 意象 ， 许 多 科技 产品 的 用 色 ， 如 电视 、 跑 王 、 摄 像 机 、 音 啊 、 仪 器 的 色彩 大 多 
及 用 黑色 。 人 在 其 他 方面 ， 黑 色 的 庄严 总 象 ， 也 常用 在 一 些 特殊 场合 的 空间 设计 中 ， 生 活用 品 和 服饰 设计 大 多 利用 黑色 来 塑造 高 贵 
的 形象 ， 也 是 一 种 永远 流行 的 主要 颜色 ， 适 合 和 许多 色彩 搭配 。 


灰色 的 色彩 意象 


在 商业 设计 中 ， 灰 色 具 有 柔和 、 高 雅 的 意 销 ， 而 且 属 于 中 间 性 格 ， 男 女 几 能 接受 ， 所 以 灰色 也 是 永远 流行 的 主要 闸 色 。 在 许 
多 高 科技 产品 ， 尤 其 是 和 人 金属 材料 有 关 的 ， 几 乎 都 采用 灰色 来 传达 高 级 、 科 技 的 形 销 。 使 用 灰色 时 ， 大 多 利用 不 同 的 层次 变化 组 


合 或 搭配 其 他 色彩 ， 才 不 会 过 于 沉 浆 ， 而 有 呆板 、 价 硬 的 感觉 。 弟 见 灰 色 为 大 区 、 老 鼠 灰 、 昌 灰 、 深 灰 。 灰 色 APP 如 图 1.43 所 


小 \。 


图 1.43 ”灰色 APP 


115 ”色彩 的 性 格 


提起 爱情 或 许 大 多 数 人 认为 她 是 红色 和 粉红 色 ， 而 幸福 是 什么 颜色 的 ”金色 和 红色 ， 可 能 这 是 最 单 见 的 答案 ， 嫉 妒 呢 ?认为 
黄色 的 居多 。 优 雅 呢 ? 答案 是 黑色 和 银色 ， 由 此 可 见 ， 色 彩 是 有 性 格 的 ， 通 过 色彩 和 性 格 的 对 比 可 以 与 UI 设 计 相 结 合 ， 同 时 在 
进行 设计 创作 时 赋予 设计 独特 的 性 格 。 下 面 融 是 设计 中 单 用 到 的 色彩 所 具备 的 性 格 。 色 彩 的 性 格 表现 如 图 1.44 所 示 。 
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图 1.44 色彩 的 性 格 表现 


红色: 浪漫、 热情、 火焰 。 红 色 在 很 多 文化 中 代表 的 是 停止 信号 ， 用 于 警告 或 禁止 动作 。 


` 紫色 : Ji, pR, Aq. jp. St. W 6. & 4k 2 X 4 P 5 3 4 X 

` 蓝 色 : Aj. eA. DR. T 3k. 2622. AF45. 

“绿色: 自然、 稳定 、 成 长 。 绿 色 最 显著 的 特征 是 与 环保 相关 。 

“ 黄色 : 明 竞 、 光 辉 、 疾 病 、 民 弱 。 黄 色 能 带 给 人 食欲 ， 在 一 些 食品 、 饮 食 应 用 中 比较 常见 。 
. 黑色: 能 力 、 精 致 、 酷 、 暗 。 


` 白色 : 纯洁 、 和 天真、 洁净 、 和 平 、 冷 淡 、 贫 之 。 


1.16 “精彩 UI 设计 赏析 


这 世界 上 并 没有 绝对 完美 的 设计 ， 它 是 一 门 需要 不 断 自我 完善 、 学 习 的 学 科 。 在 没有 扎实 的 设计 基础 时 需要 多 看 、 多 学 习 一 
些 著名 的 设计 ， 通 过 观察 学 习 那 些 成 功 的 设计 同时 也 是 一 种 成 长 的 过 程 。 下 面 就 是 一 些 经 过 分 类 的 精彩 UI 设计 . 


按钮 类 图 形 图 标 设计 如 图 1.45 所 元 。 
° 
'_ ' I © 目 


图 1.45 ”按钮 类 图 形 图 标 设计 


表盘 & 转 盘 类 的 设计 如 图 1.46 所 示 。 


图 1.46 +#&32 3094 TF (22) 


加 形 元 素 的 设计 如 图 1.47 所 示 。 


图 1.47 形 元 素 的 设计 


优秀 天 气 界面 设计 如 图 1.48 所 示 。 


图 1.48 优秀 天 气 界 面 设 计 


图 1.48 ”优秀 天 气 界 面 设计 ( 续 ) 


拟 物 化 的 图 标 设计 如 图 1.49 所 示 。 
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图 1.49 ” 拟 物化 的 图 标 设计 


1.17” 激 友 创作 灵感 的 界面 欣 呐 


在 设计 过 程 中 出 现 阻 碍 时 ， 天 于 无 解决 乙 道 ， 这 时 融 需 要 欣 员 一些 具 有 一 定 “ 概 念 化 ”的 设计 界面 ， 以 此 获取 灵感 ， 打 开 全 
新 的 设计 之 窗 。 通 过 下 面 几 个 精 选 界面 的 赏析 一 定 让 你 在 短 时 间 内 灵感 而 友 ， 如 图 1.50 所 示 。 


图 1.50 4 # AX Am) HX YC 


第 2 草 ”UI 基础 控件 设计 
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本 章 介绍 


本 章 讲 解 UI 基 础 控件 设计 ， 在 日 常 UI 设 计 工作 中 ， 基 础 类 控件 是 整体 界面 的 基础 ， 通 过 这 些 基础 控件 的 制作 ， 将 其 完美 组 
合成 为 一 个 整体 。 本 章 例 举 了 一 些 十 分 实用 的 控件 制作 ， 如 和 甬 点 开关 控件 、 透 明 按钮 、 立 体 按 钮 、 邮 箱 登 录 控 件 、 质 感 滑动 控 
件 、 调 节 旋 钮 及 控件 按键 ， 通 过 对 这 些 控件 制作 的 学 习 ， 可 以 掌握 大 部 分 基础 类 UI 设 计 知 识 ， 为 后 面 真 正 的 UI 设 计 打 下 扎实 的 
基础 。 


要 点 索引 
学 习 绘 制 触 点 开关 控件 
:学习 制作 透明 按钮 
-学习 制作 立体 按键 


掌握 邮箱 登录 控件 绘制 


. 学 习 制作 质感 滑动 控件 
.学习 制作 调节 旋 馈 


了 解 控制 按键 制作 流程 


2.1 触 点 开 天 控 件 


设计 构思 


本 例 讲解 制作 触 点 开关 控件 ， 此 款 控 件 的 制作 过 程 比较 简单 ， 主 要 以 笑脸 与 心 形 元 素 组 成 ， 整 体 效 果 相当 出 色 ， 最 终 效 果 如 
图 2.1 所 示 。 


- 难 易 指数 : k yc Yc Ye Ye 


案例 位 置 : 源 文件 \ 第 2 章 \ 触 点 开关 控件 .psd 


` 视频 位 置 : 视频 教学 \2.1 触 点 开关 控件 .avi 


轮廓 开关 控件 


主体 色 为 紫色 ， 白 色 为 辅助 色 ， 整 体 色 彩 简洁。 


5 (R:235,G:95,B:144) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令 ， 在 弹出 的 对 语 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 局 度 】 为 250 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 235, G: 95, B: 144) , [>É 
径 】 为 42 像 素 ， 绘 制 一 个 圆 角 和 窍 形 ， 此 时 将 生成 一 个 【 圆 角 矩 形 1】 图 层 ， 如 图 2.2 所 示 。 


图 2.2 ”绘制 圆 角 和 矩形 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 看 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 圆 角 矩形 左 侧 位 置 
按 住 shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 2.3 所 示 。 


步骤 04 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 四 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 】 
图 层 ， 如 图 2.4 所 示 。 


图 2.3 ”绘制 正 圆 


图 2.4 复制 图 层 


步骤 05 选中 【椭圆 1】 图 层 ， 将 其 图 层 【 不 适 明 硫 】 更 改 为 20%， 效 果 如 图 2.? 所 示 。 


图 2.5 ”降低 不 透明 度 


步骤 06 选择 工具 箱 中 的 【 自 定形 状 工具 】 营 ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 【形状 】|【 红 心 形 卡 】 形 
状 ， 如 图 2.6 所 示 。 


步骤 07 在 属性 栏 中 将 【填充 】 更 改 为 日 色 ，【 描 边 】 更 改 为 无 ， 在 正 圆 位 置 按 住 Shift 键 绘制 一 个 心 形 ， 如 图 2.7 所 示 。 


步骤 08 


步骤 09 
中 的 【路 


选中 【椭圆 1 拷贝 】 图 层 ， 将 图 形 向 右 侧 平 黎 ， 如 图 2.8 所 示 。 


图 2.6 ”选择 形状 


图 2.7 绘制 心 形 


图 2.8 ”移动 图 形 


选择 工具 箱 中 的 【 李 圆 工具 】 意 ， 按 住 Alt 键 在 正 圆 左上 角 绘 制 一 个 小 椭圆 路 径 ， 将 音 
选择 工具 】** ， 将 小 李 圆 向 右 侧 平 移 复 制 一 份 ， 制 作 链 空 眼 睛 效果 ， 如 图 2.9 所 示 。 


了 分 图 形 减 去 ， 


图 2.9 ”制作 眼睛 


步骤 10 ”选择 工具 箱 中 的 【钢笔 工具 】 仿 ， 单 击 属性 栏 中 的 【路 径 操 作 】 日 按钮 ， 在 弹出 的 选项 中 选择 【 减 去 顶层 形 
状 】， 在 眼睛 下 方 绘制 一 个 嘴巴 形状 路 径 ， 制 作出 匀 空 嘴巴 效果 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 2.10 所 示 。 


图 2.10 ”最 终 效 果 
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设计 构思 


本 例 讲 解 制作 透明 按钮 ， 该 按钮 具有 十 分 出 色 的 透明 质感 ， 其 制作 过 程 比 较 简 单 ， 以 圆 角 矩形 作为 主体 轮廓 ， 通 过 图 层 样式 
的 灵活 使 用 制作 出 透明 按钮 效果 ， 最 终 效果 如 图 2.11 所 示 。 


. 难 易 指数 : kk kx 


` 案例 位 置 : 源 文件 \ 第 2 齐 \ 透 明 按钮 .psd 


. 视频 位 置 : 视频 教学 \2.2 透 明 按 钮 .avi 


图 2.11 最终 效果 


重点 分 解 
色彩 分 析 


主 色调 为 暖 橙色 ， 以 黄色 及 白色 作为 辅助 和 色调， 整体 表现 出 很 强 的 透明 质感 。 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 高 度 】 为 300 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十 ， 新 建 一 个 空 日 画布 。 然 后 将 画布 填充 为 黄色 (R: 239, G: 175, B: 0) 到 橙色 (R: 254, G: 
138, B: 0) 的 径 向 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
50 像 素 ， 绘 制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 2.12 所 示 。 


步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 算 形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 避 按钮 上 ， 复 制 一 个 【 圆 角 算 形 
1 拷贝 】 图 层 ， 分 别 将 其 图 层 名 称 更 改 为 【高 光 】、【 轮 廊 】， 如 图 2.13 所 示 。 


图 2.12 ”绘制 圆 角 和 矩形 


c f mm e. DP T] 


图 2.13 复制 图 层 


步骤 04 在 【图 层 】 面 板 中 选中 【轮廓 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 名 按钮 ， 在 菜单 中 选择 【内 发 光 】 命 令 ， 
在 弹出 的 对 话 框 中 将 【 渴 合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 黄色 (R: 253, G: 244, B: 
0) ，【 大 小 】 更 改 为 10 像 素 ， 如 图 2.14 所 示 。 


图 2.14 设置 【内 发 光 】 参 数 


步骤 05 ”选中 【渐变 晋 加 】 复 选 框 ， 将 【渐变 】 更 改 为 查 色 (R: 254, G: 138, B: 0) 到 橙色 (R: 254, G: 138, B: 
0) ， 将 第 2 个 色 标 的 【不 透明 度 】 更 改 为 0%， 如 图 2.15 所 示 。 


图 2.15 WE [ər F £a] Zk 


步骤 06 rH [256] #usfE, # [TE4Szu] SEP IIER JZ] , [J#HBBFEZ] S80227J40%, [Em] SEDY7JES G 
(R: 223, G: 138, B: 28) ，【 大 小 】 更 改 为 20 像 素 ， 如 图 2.16 所 示 。 


图 2.16 设置 【外 发 光 】〗 参数 


步骤 07 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 荆 加 】，【 不 透明 度 】 更 改 为 20%，【 距 离 】 更 改 为 37 像 素 ， 
【大 小 】 更 改 为 20 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.17 所 示 。 


图 2.17 RE [232] 22 


步骤 08 在 【图 层 】 面 板 中 选中 【轮廓 】 图 层 ， 将 其 图 层 【 填 序 】 更 改 为 0%， 效 果 如 图 2.18 所 示 。 


步骤 09 ”选中 【高 光 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 
图 2.19 所 示 。 


图 2.18 ”更 改 填充 


图 2.19 ”缩小 图 形 


步骤 10 ”在 【图 层 】 面 板 中 选中 【高 光 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 蒙 版 】 昌 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 2.20 
所 示 。 


步骤 11 ”选择 工具 箱 中 的 【渐变 工具 】 居 ,编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 目 按钮 ， 在 图 形 上 拖 动 
将 部 分 图 形 隐 藏 ， 如 图 2.21 所 示 。 


图 2.21 ”隐藏 图 形 


”选择 工具 箱 中 的 【椭圆 工具 】 虹 ， 在 选项 栏 中 将 【填充 】 更 改 为 日 色 ，【 描 边 】 更 改 为 无 ， 在 按钮 底部 绘制 一 个 
顶 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 2.22 所 示 。 


图 2.22 ”绘制 图 形 


步骤 13 执行 荣 单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 局 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 2.23 所 示 。 


步骤 14 执行 菜单 壬 中 的 【 滤 镜 】| 【模糊 】| 【动感 异 糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0%，【 距 离 】 更 改 为 
50 像 素 ， 设 置 完成 乙 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 2.24 所 示 。 


图 2.23 ”添加 高 斯 模糊 


图 2.24 ”添加 动感 模糊 
步 又 15 ”选中 【椭圆 1】 图 层 ， 将 其 图 层 混 合 模 式 设置 为 【 苇 加 】， 效 果 如 图 2.25 所 示 。 


步骤 16 选择 工具 箱 中 的 【 酸 排 文字 工具 】 上 ， 在 按钮 位 置 添加 文字 (Humnst777Blk BT) ， 如 图 2.26 所 示 。 


图 2.25 ”设置 图 层 混 合 模式 


图 2.26 ”添加 文字 


步骤 17， 在 【图 层 】 面 板 中 选中 【ENTER】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 兰 按钮 ， 在 荣 单 中 选择 【内 发 光 】 命 
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步骤 18 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 术 色 (R: 
231, G: 111, B: 24) ，【 大 小 】 更 改 为 3 像素 ， 如 图 2.27 所 示 ，。 


步骤 19 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 革 加 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 50%，【 距 
离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 束 完 成 了 效果 的 制作 ， 如 图 2.28 所 示 。 
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图 2.27 设置 【内 发 光 】 参 数 


图 2.28 最终 效果 


23 ”立体 按键 


设计 构思 


本 例 讲 解 制作 立体 按键 ， 该 按键 采用 立体 视觉 设计 手法 ， 通 过 图 像 的 组 合 ， 在 视觉 上 形成 一 种 立体 效果 ， 同 时 直观 的 形状 标 
识 增强 了 按键 特征 ， 最 终 效果 如 图 2.29 所 示 。 


图 2.29 ”最 终 效果 
. 难 易 指数 : kk k Yc yx 
. 案例 位 置 : 源 文件 \ 第 2 章 \ 立 体 按键 .psd 


视频 位 置 : 视频 教学 \2.3 立 体 按 键 .avi 


主 色调 为 科技 灰色 ， 以 青色 为 辅助 色 ， 灰 色 体 现 出 按键 质感 ， 青 色 则 点 明了 控制 示意 。 


灰色 (R:247,G:247,B:247) 青色 (R:0,G:210,B:255) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 


， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 高 度 】 为 300 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 十， 


新 建 一 个 空 日 画布 ， 并 为 画布 添加 【 杂 色 】 渡 镜 ， 设置 【数量 】 为 10。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 算 形 工具 】  ”K 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
50 像 素 ， 绘 制 一 个 圆 角 窟 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 1】 图 层 ， 如 图 2.30 所 示 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 忆 按钮 上 ， 复 制 两 个 拷贝 图 层 
分 别 将 其 图 层 名 称 更 改 为 【顶部 】、【 厚 度 】 及 【底部 】， 如 图 2.31 所 示 。 


图 2.30 ”绘制 圆 角 和 矩形 


图 2.31 


As 
Xo 


复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【底部 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 立 按 钮 ， 在 荣 单 中 选择 【渐变 赤 加 】 命 
223) , 


步骤 05 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 247, G: 247, B: 247) 到 灰色 (R: 218, G: 219, B: 
完成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 2.32 所 示 。 


图 2.32 ¿E Ju E 2 Ju 


步骤 06 选中 【厚度 】 图 层 ， 将 其 等 比 缩小 ， 再 以 刚才 同样 的 万 法 为 其 添加 灰色 (R: 194, G: 194, B: 194) 到 灰色 
(R: 237, G: 237, B: 237) 的 线性 渐变 ，【 角 度 】 更 改 为 0， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 2.33 所 示 。 


选中 【外 友 光 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 40%，【 颜 色 】 更 改 为 黑色 ， 


步骤 07 


【大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 2.34 所 示 。 
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图 2.34 设置 【外 发 光 】 参 数 


步骤 08 选中 【项 部】 图 层 ， 将 图 形 等 比 缩小 ， 如 图 2.35 所 示 。 


+ 
步骤 09 ”选择 工具 箱 中 的 【添加 锚 点 工具 】 “Z? ， 在 圆 角 矩 形 项 部 和 底部 边缘 位 置 单 击 添加 锚 点 ， 如 图 2.36 所 示 。 


图 2.35 ”缩小 图 形 


图 2.36 JZ&2n40 S. 


步骤 10 “分 别 选择 工具 箱 中 的 【转换 点 工具 】 人 及 【直接 选择 工具 】 Í , HesbiEle5EyRzzaInlBsageytaraist2=yz, ane 
2.37 所 泵 。 


步骤 11 在 【图 层 】 面 板 中 选中 【顶部 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 痉 按 钮 ， 在 菜单 中 选择 【渐变 晋 加 】 命 
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步骤 12 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 日 色 到 灰色 (R: 246, G: 246, B: 246) ，【 角 度 】 更 改 为 0 度 ， 完 成 之 后 
单 击 【 确 定 】 按 钮 ， 效 果 如 图 2.38 所 示 。 


图 2.37 将 图 形变 形 


图 2.38 添加 渐变 
步骤 13 ”选择 工具 箱 中 的 【 横 排 文 字 工 具 】 上 ， 在 按钮 位 置 添加 文字 (Calibri Bold) ,如 图 2.39 所 示 。 


步 又 14 ”选中 【OFF]】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 蛙 而 姐 标 石 键 ， 从 弹出 的 快捷 亲 早 中 选择 【 科 
切 】 命 令 ， 拖 动 变形 框 控 制 点 将 文字 变形 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 2.40 所 示 。 


图 2.39 ”添加 文字 


图 2.40 j$ # jJ 
步骤 15 在 【图 层 】 面 板 中 选中 【ON 】 图 层 ， 单 击 面板 帮 部 的 【添加 图 层 样式 】 六 按钮 在 菜单 中 选择 【内 阴影 】 命 令 。 


步骤 16 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 30%，【 距 离 】 
更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 如 图 2.41 所 示 。 


+i#jz(o: —— J 到 
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图 2.41 设置 【内 阴影 】 参 数 


步骤 17 在 【ON】 图 层 名 称 上 单 击 电 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 在 【OFF 】 图 层 名称 上 单 
击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【粘贴 图 层 样 式 】 命 令 ， 如 图 2.42 所 示 。 


图 2.42 ”拷贝 并 粘贴 图 层 样 式 
步骤 18 ” 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 "l 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 如 图 2.43 所 示 。 


步骤 19 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 


为 85 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 2.44 所 示 。 


图 2.43 ”新 建 图 层 


图 2.44 设置 笔触 


步骤 20 ”将 前 景色 更 改 为 青色 (R: 0，G: 210, B: 255) ， 在 【ON 】 文 字 位 置 单 击 添 加 颜色 ， 如 图 2.45 所 示 。 


步骤 21 选中 【图 层 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 蔷 加 】， 这 样 束 完 成 了 效果 的 制作 ， 如 图 2.46 所 示 。 


图 2.45 ”添加 颜色 


图 2.46 ”最 终 效 果 


24 ”邮箱 登录 控件 


设计 构思 


本 例 讲解 制作 邮箱 登录 控件 ， 该 控件 是 以 漂亮 的 标签 样式 与 简洁 的 按钮 搭配 ， 整 体 表现 出 很 强 的 控件 特征 ， 最 终 效果 如 图 


2.47 所 示 。 
. 难 易 指数 : 3k k>k 
案例 位 置 : 源 文件 \ 第 2 章 \ 邮 箱 登 录 控 件 .psd 


` 视频 位 置 : 视频 教学 \2.4 邮 箱 登 录 控 件 .avi 


nter ernal 
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图 2.47 最 终 效 果 


重点 分 解 
f 
L Fr 
标签 按钮 
色彩 分 析 


主体 色 为 科技 蓝 色 ， 浅 红色 为 辅助 和 色 ， 整 体 和 色调 体现 出 较 强 的 科技 感 。 


监 色 (R:77,G:179,B:227) 红色 (R:244,G:106,B:112) 


执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 高 度 】 为 300 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 蓝 色 (R: 77, G: 179, B: 227) 。 


选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 27, G: 128, B: 176) ， 绘 制 
一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 2.48 所 示 。 


图 2.48 ”绘制 圆 角 矩形 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【内 阴 
影 】 命 令 。 


步骤 04 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 颜 色 】 更 改 为 深 监 色 (R: 3, G: 51, B: 73) ，【 不 透明 
度 】 更 改 为 80%， 取 消 【 使 用 全 局 光 】 复 选 框 ，【 和 角度 】 更 改 为 180 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 6 像素 ， 如 图 
2.49 所 示 。 
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设置 为 默 让 值 “| | Plomo. | 


图 2.49 设置 【内 阴影 】 参 数 


步骤 06 选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 旱 加 】，【 颜 色 】 更 改 为 日 多，【 不 透明 度 】 更 改 为 100%， 取 消 
【使 用 全 局 光 】 复 选 枉 ，【 和 角度】 更 改 为 0 度 ，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 
图 2.50 所 示 。 


Resim maaa: E [ mh | 
0 SERRUSBI 应 [0 [新 建 样式 0W)..。 _ 


于 Semt 一 | ; x= 
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图 2.50 ZE [832] 222 


步骤 06 ”选择 工具 箱 中 的 【和 矩形 工具 】 国 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 235, G: 235, B: 235) , DE 
边 】 更 改 为 无 ， 绘 制 一 个 矩形， 此 时 将 生成 一 个 【和 矩 形 1】 图 层 ， 如 图 2.51 所 示 。 


+ 
步骤 07 ”选择 工具 箱 中 的 【添加 销 点 工具 】 2 ， 在 窍 形 石 侧 边缘 中 间 位 置 单 击 添加 钵 点 ， 然 后 回 右 侧 拖 动 调整 该 锁 点 ， 形 
箭头 效果 ， 如 图 2.52 所 示 。 


图 2.51 22 h] EJE 


D 


图 2.52 ”添加 锚 点 并 调整 


选择 工具 箱 中 的 【直线 工具 】“ ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 122, G: 206, B: 238) ，【 描 边 】 
更 改 为 无 ，【 粗 细 】 更 改 为 3 像素 ， 按 住 shift 键 绘制 一 条 垂直 线段 ， 此 时 将 生成 一 个 【形状 1】 图 层 ， 如 图 2.53 所 示 。 


按 住 Alt 键 向 右 侧 平移 复制 一 份 ， 将 生成 一 个 【形状 1 拷贝 】 图 层 ， 并 将 线段 【填充 】 更 改 为 红色 (R: 244, G: 
107, B: 113) ， 如 图 2.54 所 示 。 


图 2.53 ”绘制 线段 


图 2.54 复制 线段 


步骤 10 ”同时 选中 蓝 色 和 红色 线段， 将 其 复制 多 份 直到 完全 履 关 下 方 图 形 ， 如 图 2.25 所 示 。 


步骤 11 同时 选中 所 有 和 线段 相关 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【条 纹 】， 按 Ctrl+E 组 合 键 
将 其 合并 ， 将 生成 一 个 【条 纹 】 图 层 ， 如 图 2.56 所 示 。 
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图 2.56 “合并 组 
步骤 12 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 像 适 当 旋 转 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 2.57 所 示 。 


步骤 13 ”选择 工具 箱 中 的 【矩形 选 框 工 具 】 :-. ， 在 标签 底部 绘制 一 个 矩形 以 选中 部 分 所 需 条 纹 图 像 ， 如 图 2.58 所 示 。 


图 2.57 ”旋转 图 像 


图 2.58 绘制 选区 


步骤 14 执行 菜单 栏 中 的 【选择 】|【 肥 加 】 合 令 ， 将 选区 反 回 ; 选中 【条 纹 】 图 层 ， 将 多 余 图 像 删 除 ， 完 成 之 后 按 Ctrl+D 
组 合 键 取 消 选 区 ， 如 图 2.59 所 示 。 


步骤 15 按 Ctrl+E 组 合 键 向 下 合并 ， 如 图 2.60 所 示 。 


图 2.59 ”删除 图 像 


图 2.60 “合并 图 层 


步骤 16 在 【图 层 】 面 板 中 选中 【条 纹 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按 钮 ， 在 菜单 中 选择 【渐变 看 加 】 命 


42 


步骤 17 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 深 赣 色 (R: 142, G: 174, B: 189) 到 蓝 色 (R: 142, G: 174, B: 
189) ， 将 第 2 个 蓝 色 不 透明 度 色 标的 【不 透明 度 】 更 改 为 0%，【 位 置 】 更 改 为 7， 并 设置 新 变 又 鲁 加 的 【角度 】 为 0， 如 图 2.61 
所 示 。 
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步骤 18 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深蓝 色 (R: 37, G: 112, B: 147) , 
【不 透明 度 】 更 改 为 30%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 114 度 ，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 0 像 
素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.62 所 示 。 
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图 2.62 ”设置 【投影 】 参 数 


步骤 20 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 深蓝 色 (R: 27, G: 
128, B: 176) ，【 吏 度 】 更 改 为 2 品 ，【 半 径 】 更 改 为 5 像素 ,绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 算 形 2】 图 层 ， 如 图 


2.64 所 示 。 


图 2.63 ”添加 文字 
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图 2.64 ”绘制 图 形 


步骤 21 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 并 按钮 ， 在 菜单 中 选择 【投影 


í 
HD Zo 


步骤 22 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 堵 加 】， 【颜色 】 更 改 为 日 多 ，【 不 透明 硫 】 更 改 为 60%，【 距 离 】 
更 改 为 1 像素 ,完成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.65 所 示 。 
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图 2.65 ”设置 【投影 】 参 数 


2223 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 Í ， 添 加 文字 (方正 兰亭 黑 ) ， 如 图 2.66 所 示 。 
步骤 24， 在 【 圆 角 和 矩形 2】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样式 】 命 令 ， 在 【Sign in] EJE 
名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【粘贴 图 层 样式 】 命 令 ， 这 样 就 完成 了 效果 的 制作 ， 如 图 2.67 所 示 。 


nter emal 


图 2.66 添加 文字 


图 2.67 最 终 效 果 


本 例 讲解 制作 质感 滑动 控件 ， 该 控件 在 制作 过 程 中 ， 以 突出 的 高 光 质 感 与 直观 的 滑动 图 像 效 果 ， 完 美 表现 出 控件 的 特征 ， 最 
终 效果 如 图 2.68 所 示 。 


. 难 易 指数 : kk k k x< 


. 案例 位 置 : 源 文件 \ 第 2 章 \ 质 感 滑动 控件 .psd 


` 视频 位 置 : 视频 教学 \2.5 质 感 滑动 控件 .avi 


图 2.08 最终 效 果 


滑 块 底座 


主体 色 为 质感 灰色 ， 以 蓝 色 和 红色 作为 醒目 色 ， 整 体 色 调 表 现 出 醒目 的 开关 特征 。 


ww ww 
灰色 (R:190,G:190,B:192) 蓝 色 (R:62,G:146,B:220) 红色 (R:227,G:50,B:48) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 500 像 素 ，【 高 度 】 为 350 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 居 |， 编辑 浅 莫 色 (R: 194, G: 203, B: 208) 到 浅 蓝 色 (R: 240, G: 
243, B: 244) 再 到 浅 蓝 色 (R: 194, G: 203, B: 208) 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 央 按钮， 在 画布 中 从 上 至 下 
拖 动 填充 渐变 ， 如 图 2.69 所 示 。 


图 2.69 ”填充 渐变 


步骤 03， 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 210, G: 214, B: 217) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 90 像素， 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 2.70 所 示 。 


步骤 04 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 两 个 拷贝 图 
层 ， 分 别 将 图 层 名 称 更 改 为 【边框 】、【 卡 扣 】、【 底 部 】， 如 图 2.71 所 示 。 


图 2.70 ”绘制 图 形 


图 2.71 复制 图 层 


步骤 05 “将 【边框 】 及 【 卡 扣 】 图 层 隐藏 。 选 择 工具 箱 中 的 【矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 
62, G: 146, B: 220) ，【 摘 边 】 更 改 为 无 ， 在 圆 角 和 矩形 左 侧 绘制 一 个 矩形 ， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 将 其 移 至 【 廊 
部 】 图 层 上 方 ， 如 图 2.72 所 示 。 


步骤 06 ”选中 起 形 并 向 右 侧 平移 复制 三 份 ， 将 生成 【 算 形 1 拷贝 】、【 存 形 1 拷 贝 2】、【 和 窍 形 1 拷贝 3】 图 层 ， 如 图 2.73 所 
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图 2.72 ”绘制 矩形 


图 2.73 ”复制 矩形 


步骤 07 ”选中 【和 矩形 1】 及 【和 矩形 1 拷贝 2】 图 层 ， 将 图 层 【 填 充 】 更 改 为 红色 (R: 227, G: 50, B: 48) ， 如 图 2.74 所 


小 \。 


步骤 08 ”同时 选中 所 有 和 【和 矩形 1】 相 关 的 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 当 出 现 变 形 框 之 后 在 选项 栏 
的 【旋转 】 文 本 框 中 输入 45， 完 成 之 后 按 Enter 键 确认 ， 如 图 2.75 所 示 。 


图 2.74 更改 填 充 


图 2.75 ”旋转 图 形 


步骤 09 执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 售 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 2.76 所 示 。 


图 2.76 ”创建 剪贴 蒙 版 


提示 与 技巧 
创建 剪贴 蒙 版 之 后 ， 可 适当 移 至 图 形 将 下 方圆 角 撼 形 完 全 敌 盖 。 


步骤 10 ”同时 选中 所 有 和 矩形 相关 的 图 层 及 【底部 】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【条 纹 底 
部 】。 


步骤 11 在 【图 层 】 面 板 中 选中 【条 纹 底 部 】 组 ， 单 击 面板 底部 的 【添加 图 层 样式 】 亦 按 钮 ， 在 荣 单 中 选择 【内 发 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 50%，【 颜 色 】 更 改 为 黑色 ，【 大 小 】 更 改 为 15 
像素 ， 完 成 之 后 蛙 击 【确定 】 按 钮 ， 如 图 2.77 所 示 。 
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图 2.77 设置 【内 发 光 】 参 数 


步骤 12 ”选择 工具 箱 中 的 【椭圆 工具 】 看 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 椭圆 图 形 ， 
此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 2.78 所 示 。 


步骤 13 ”选中 【椭圆 1】 图 层 ， 执行 菜 单 栏 中 的 【 渡 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 蛙 击 【 栅 格 化 】 
按钮 ， 然 后 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 7 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.79 所 元。 


图 2.78 22 h] 4 


图 2.79 添加 高 斯 模糊 


步骤 14 ”选中 【椭圆 1】 图 层 ， 执行 菜 单 栏 中 的 【图 层 】| 【创建 草 贴 莹 版】 命令 ， 为 当前 图 层 创建 齐 贴 ， 隐 藏 部 分 图 像 ， 如 
图 2.80 所 示 。 


图 2.80 创建 剪贴 莹 版 


步骤 12 ”选中 【 卡 扣 】 图 层 , 将 其 移 双 【条 纹 底部 】 组 中 ， 执 行 菜单 祷 中 的 【图 层 】| 【创建 剪贴 蒙 版 】 命 令 ， 为 当前 图 层 
创建 剪贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 2.81 所 示 。 


步骤 16 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ñ ， 选 中 【 卡 扣 】 图 层 右 侧 锚 点 并 向 左 侧 拖 动 缩短 其 宽度 ， 如 图 2.82 所 示 。 


Ee 


图 2.81 创建 剪贴 蒙 版 


82.82 4j63J46 e. 


步骤 17 在 【图 层 】 面 板 中 选中 【 卡 扣 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 PO24H, Zrszeadhkiz Dez] 命令 ， 
在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 50%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 125 度 ，【 距 离 】 更 改 为 3 像 
素 ，【 大 小 】 更 改 为 10 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 2.83 所 示 。 
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图 2.83 ”设置 【投影 】 参 数 


步骤 18 ”选中 【边框 】 图 层 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 3 点 ， 单 击 【 设 置 形 
状 描 边 类 型 】[ 一 一 :按钮 ， 在 弹出 的 选项 中 将 【对 齐 】 更 改 为 中 间 对 齐 样式 ， 效 果 如 图 2.84 所 示 . 


步 又 19， 在 【图 层 】 面 板 中 选中 【边框 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 粟 按钮， 在 菜单 中 选择 【渐变 琶 加 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 白色 到 灰色 (R: 183，G: 187，B: 200) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.85 所 
不 


图 2.84 更 改 属性 


图 2.85 ”添加 渐变 县 加 


步骤 20 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 圈 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更改 为 
50 像 素 ， 绘 制 一 个 圆 角 和 矩 形 ， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 层 ， 如 图 2.86 所 示 。 


步骤 21 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 SÍ 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷贝 】 图 层 ， 如 图 2.87 所 示 。 


图 2.86 ”绘制 圆 角 和 矩形 


图 2.87 ”复制 图 层 


步骤 22 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩 形 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fea, 在 菜单 中 选择 【和 斜 
面 和 浮雕 】 命 令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 高 光 模 
式 】 及 【阴影 模式 】 中 的 【不 透明 度 】 更 改 为 590%， 如 图 2.88 所 示 。 
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图 2.88 ”设置 【斜面 和 浮雕 〗 参 数 


步骤 23 ”选中 【渐变 区 加 】 复 选 框 ,将 【渐变 】 更 改 为 灰色 (R: 190, G: 190, B: 192) 到 日 色 再 到 灰色 (R: 
243, G: 243, B: 243) ， 将 日 色色 标 位 置 更 改 为 75%， 如 图 2.89 所 示 。 


“ Í 


图 2.89 JEE [ər 3 5 ja] 参数 


步骤 24 ”选中 【投影 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 50%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 
离 】 更 改 为 2 像素 ，【 大 小 】 为 7 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.90 所 示 。 
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图 2.90 设置 【投影 】 参 数 
步骤 25 ”选中 【 贺 角 窍 形 1】 图 层 ， 将 【填充 】 更 改 为 黑色 ， 执 行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模 糊 】 命 令 ， 在 阐 
出 的 对 语 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 45 像 素 ， 设 置 完 成 之 后 单 


击 【 确 定 】 按 钮 ， 如 图 2.91 所 示 。 
步骤 26 ”执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 7 像素 ， 完 成 之 后 蛙 


击 【 确 定 】 按 钮 ， 如 图 2.92 所 示 。 


图 2.91 添加 动感 模糊 


图 2.92 ”添加 高 斯 模糊 


步骤 27， 在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 圈 按钮 ， 为 其 图 层 添加 图 层 蒙 
版 ， 如 图 2.93 所 示 。 


步骤 28 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 130 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 2.94 所 示 。 


图 2.93 ”添加 图 层 蒙 版 


图 2.94 设置 笔触 


步骤 29 ”将 前 景色 更 改 为 黑色 ， 在 其 图 像 上 部 分 区 域 涂抹 将 其 隐藏 ， 这 样 束 完 成 了 效果 的 制作 ， 如 图 2.95 所 示 。 


8295 ”了 最终 效果 
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本 例 讲解 制作 调节 旋钮 ， 此 款 旋 钮 具有 非常 不 错 的 质感 ， 醒 目的 进度 提示 装饰 图 形 与 旋钮 相 组 合 ， 整 体 表 现 出 很 强 的 实用 
性 ， 最 终 效果 如 图 2.96 所 示 。 


. 难 易 指数 : kk kc < 
案例 位 置 : 源 文件 \ 第 2 章 \ 调 节 旋 钮 .psd 


` 视频 位 置 : 视频 教学 \2.6 调 节 旋 钮 .avi 
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图 2.90 J: 22 ë 3 
重点 分 解 
4 183 
进度 图 形 旋钮 指示 元 素 

色彩 分 析 
主 色调 为 青色 ， 以 浅 蓝 色 作 为 辅助 色 ， 整 体 色 调 表 现 出 很 强 的 科技 感 。 
3 
青色 (R:5,G:190,B:240) 浅 蓝 色 (R:207,G:218,B:225) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 高 度 】 为 300 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 芽 | ， 编 辑 浅 蓝 色 (R: 207, G: 218, B: 224) 到 浅 蓝 色 (R: 242, G: 


246, B: 252) 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 和 按钮 ， 在 画布 中 拖 动 填充 渐变 ， 如 图 2.97 所 示 。 


图 2.97 ”填充 渐变 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 恩 》$， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 5 
点 ， 在 画布 中 间 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 】 图 层 ， 如 图 2.98 所 示 。 


步骤 04 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】， 按钮 上 ， 复 制 三 个 拷贝 图 层 ， 分 别 
将 图 层 名 称 更 改 为 【数字 】、【 旋 钮 】、【 进 度 】 及 【四 横 】， 如 图 2.99 所 示 。 


图 2.98 ”绘制 图 形 


HIIETHIIII 


图 2.99 复制 图 层 
步骤 05 将 【数字 】、【 旋 钮 )、【 进 度 】 图 层 暂 时 隐藏 。 


步骤 06 在 【图 层 】 面 板 中 选中 【 凹 槽 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 = JetH, (r3esBrR)ejš [SSHBLFRTPZBE 1 
命令 ， 在 弹出 的 对 话 框 中 将 【样式 】 更 改 为 【 枕 状 浮雕】，【 大 小 】 更 改 为 1 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 
改 为 90 度 ，【 高 光 模 式 】 中 的 【不 透明 度 】 更 改 为 60%，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 3%， 如 图 2.100 所 示 。 


| = | | 


w 10 6(V) 


+J (2); 一 1 = 


le] 
ë J 口 合用 全 局 光 人 ) 
mm: m |m 


不 后 明度 个: === G |] % 


图 2.100 设置 【斜面 和 浮雕】 参数 


步骤 07 选中 【内 发 光 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 15%， 


【大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 
2.101 所 示 。 
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图 2.101 设置 【内 发 光 】 参 数 


步骤 08 在 【图 层 】 面 板 中 选中 【 凹 槽 】 图 层 ， 将 其 图 层 【 填 宛 】 更 改 为 0%， 如 图 2.102 所 示 。 


图 2.102 ”更 改 填充 


步骤 09 选中 【进度 】 图 层 ， 在 属性 栏 中 将 【 摘 边 】 颜 色 更 改 为 青色 (R: 5, G: 190, B: 240) , [JE] SErX7J45a, 
如 图 2.103 所 示 。 


步骤 10 ”选择 工具 箱 中 的 【添加 锚 点 工具 】 Z? ， 在 形状 左上 角 边 缘 单 击 添加 锚 点 ， 如 图 2.104 所 示 。 


图 2.103 ”更 改 描 边 宽度 


图 2.104 ”添加 销 点 


步骤 11 ”选择 工具 箱 中 的 【直接 选择 工具 】 心 ， 选 中 左上 角 两 个 锚 点 之 间 的 线段 ， 将 其 删除 ， 如 图 2.105 所 示 。 


步骤 12 ”选中 【旋钮 】 图 层 , 将 【填充 】 更 改 为 日 色 ，【 摘 边 】 更 改 为 无 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 
将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 2.106 所 示 。 
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图 2.105 ”删除 线段 


图 2.106 ”变换 图 形 


步骤 13 在 【图 层 】 面 板 中 选中 【旋钮 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 套 按 钮 ， 在 菜单 中 选择 【斜面 和 浮雕 】 
命令 ， 在 弹出 的 对 话 框 中 将 【样式 】 更 改 为 【内 斜面 】，【 大 小 】 更 改 久 4 像素 ，【 局 光 蛋 式 】 更 改 为 【 堵 加 】，【 不 透明 度 】 
更 改 为 60%，【 阴 影 模式 】 更 改 为 【 正 卢 堵 底 】，【 不 透明 度 】 更 改 为 20%， 如 图 2.107 所 示 。 
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图 2.107 ”设置 【斜面 和 浮雕 】 参数 


14 选中 【渐变 去 加 】 复 选 枉 ， 将 【渐变 】 更 改 为 浅 蓝 色 (R: 207, G: 218, B: 225) 到 浅 莫 色 (R: 240, G: 


步 又 
250, B: 255) ， 如 图 2.108 所 示 。 
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图 2.108 ZE [ər k #jo] 参数 


步骤 15 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 15%， 取 消 【 使 用 全 局 光 】 复 选 
NE; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 4 像素 ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.109 所 示 。 
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步骤 16 ”选中 【数字 】 图 层 , 将 【填充 】 更 改 为 日 色 ，【 摘 边 】 更 改 为 无 ， 表 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 
令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 2.110 所 示 。 


图 2.110 ”交换 图 形 


步骤 17 ”在 【图 层 】 面 板 中 选中 【数字 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 菜单 中 选择 【内 友 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 20%，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.111 所 示 。 


. 
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图 2.111 设置 内 发 光 
步骤 18 在 【图 层 】 面 板 中 选中 【数字 】 图 层 ， 将 其 图 层 【 填 充 】 更 改 为 0%， 效 果 如 图 2.112 所 示 。 


步骤 19 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 中 间 位 置 添加 文字 (Helvetica LT Std Light) ， 如 图 2.113 所 示 . 


图 2.112 更 改 填充 


图 2.113 ”添加 文字 


步骤 20 ”在 【图 层 】 面 板 中 选中 【83】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 按钮 ， 在 菜单 中 选择 【外 友 光 】 命 令 ， 
在 弹出 的 对 话 框 中 将 【 竟 合 模式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 青色 (R: O, G: 204, B: 
255) ，【 方 法】 更 改 为 【精确 】，【 扩 展 】 更 改 为 2%，【 大 小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.114 所 
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图 2.114 设置 【外 发 光 】 参 数 


步骤 21 ”选择 工具 箱 中 的 【和 矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 青色 (R: 5, G: 190, B: 240) ，【 描 边 】 更 
改 为 无 ， 再 绘制 一 个 矩形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 2.115 所 示 。 


步骤 22 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 。 


又 23 ”选择 工具 箱 中 的 【直接 选择 工具 】 R , kerhR2EJ/ a fil|R9Ea sa Ss-tIk8, Fayusi348a/JvEs]Z= j, QIlEz2.116FF;<, 


lu 


图 2.115 22] E3 


图 2.116 “删除 锚 点 


步骤 24， 在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 莽 按 钮 ， 在 菜单 中 选择 【投影 】 命 


以 
Xo 


步骤 25 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 堵 加 】， 【颜色 】 更 改 为 日 多 ，【 不 透明 硫 】 更 改 为 100%， 取 消 【 使 
用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 这 样 残 
完成 了 效果 的 制作 ， 如 图 2.117 所 示 。 


图 2.117 最 终 效 果 


2.7 ”控制 按键 


设计 构思 


本 例 讲 解 制作 控制 按键 ， 该 控制 按键 以 经 典 的 五 维 导 舰 样式 为 结构 ， 通 过 阴影 及 质感 的 添加 ， 使 整个 按键 具有 出 色 的 观赏 性 
及 实用 性 ， 最 终 效果 如 图 2.118 所 示 。 


. 难 易 指数 : kk kc Yc 
. 案例 位 置 : 源 文件 \ 第 2 章 \ 控 制 按键 .psd 


视频 位 置 : 视频 教学 \2.7 控 制 按键 .avi 


图 2.118 最终 效果 


主 色 调 为 灰色 系 渐 变 ， 以 红色 系 渐变 作为 辅助 色 ， 整 体 表现 出 很 强 的 质感 及 科技 感 。 


I 
灰色 (R:221,G:222 B:224) 红色 (R:184,G:53,B:93) 


操作 步 又 


2.7.1 绘制 面板 效果 


二 制作 阴影 质感 


<— mili pe [PTE 


和 1 制作 主 面板 


按键 面板 
按键 面板 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 更 改 为 400 像 素 ，【 高 度 】 为 350 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 二， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 灰色 (R: 206, G: 211, B: 214) 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 108, G: 123, B: 132) ，【 描 
边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 2.119 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 三 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【按键 】、 【面板 】、【 厚 度 】 及 【阴影 】， 如 图 2.120 所 示 。 


图 2.119 ”绘制 图 形 


图 120 复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【厚度 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 按钮 ， 在 菜单 中 选择 【和 斜面 和 浮雕 】 


人 人 
HD 。 


步骤 05 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 ?像素 ，【 局 光 蛋 式 】 中 的 【不 透明 度 】 更 改 为 100%，【 阴 影 模式 】 中 的 
【不 透明 度 】 更 改 为 50%， 如 图 2.121 所 示 。 


图 2.121 设置 【斜面 和 浮雕 】〗】 参 数 


步骤 06 ”选中 【渐变 区 加 】 复 选 框 ,将 【渐变 】 更 改 为 灰色 (R: 177, G: 182, B: 185) 到 日 色 ， 完 成 乙 后 单 击 【 确 
定 】 按 钮 ， 如 图 2.122 所 示 。 


mizo: ( | ) 加 E 


] [ Bz2298GA@ | 


图 2.122 JE [Ër #jo] 参数 


步骤 07 选中 【阴影 】 图 层 ， RrnesBiSrhB5 [ueFps] | SRB) | 【动感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 
钮 ， 然 后 在 弹出 的 对 话 框 中 将 【和 角度】 更改 为 90 度 ，【 距 离 】 更 改 为 15 像 素 ， 设 置 完成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.123 所 


小 \。 


步骤 08 执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 3 像素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 再 将 其 图 层 【 不 透明 度 】 更 改 为 60%， 如 图 2.124 所 示 。 


图 2.123 添加 动感 模糊 


图 2.124 ”添加 高 斯 模糊 


步骤 09 选中 【面板 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 
图 2.125 所 示 。 


步骤 10 ”在 【图 层 】 面 板 中 选中 【按键 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 Pieza, 在 菜 蛙 中 选择 【渐变 去 加 】 命 


As 
Xo 


步骤 11 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 浅 灰 色 (R: 237, G: 237, B: 237) 到 灰色 (R: 221, G: 222, B: 
224) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 2.126 所 示 。 


图 2.125 ”缩小 图 形 


图 2.126 ”添加 渐变 


步骤 12 选中 【按键 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 
图 2.127 所 示 。 


步骤 13 ”在 【图 层 】 面 板 中 选中 【按键 】 图 层 ， 单 击 面 板 底部 的 【添加 图 层 样 式 】 Fei. 在 菜 蛙 中 选择 【渐变 去 加 】 命 
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步骤 14 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 浅 灰 色 (R: 246, G: 246, B: 246) 到 灰色 (R: 207, G: 209, B: 
212) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.128 所 示 。 


图 2.127 缩小 图 形 


图 2.128 添加 渐变 


2.7.2 ”制作 按键 


制作 面板 按键 
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按键 效果 


步骤 01 选择 工具 箱 中 的 【和 矩形 工具 】 m 在 选项 栏 中 将 【 填 苑 】 更 改 为 日 多 ，【 摘 边 】 更 改 为 无 ， 在 中 间 正 圆 位 置 按 住 
shift 键 绘制 一 个 矩形 ， 此 时 将 生成 一 个 【起 形 1】 图 层 ， 如 图 2.129 所 示 。 


步骤 02 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 ， 如 图 2.130 所 示 。 


图 2.129 ”绘制 图 形 


图 2.130 ”旋转 图 形 


步 又 03 ”选择 工具 箱 中 的 【删除 锚 点 工具 】 如， 单 击 矩 形 左 侧 锚 点 将 其 删除 ， 再 将 图 形 高 度 适当 缩小 ， 如 图 2.131 所 示 ， 


图 2.131 删除 锚 点 


步骤 04 ”在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 pn, 在 菜 蛙 中 选择 【渐变 去 加 】 


í. 
RD o 


步骤 05 “在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 红色 (R: 184, G: 53, B: 93) 到 红色 (R: 254, G: 142, B: 177) , 
如 图 2.132 所 示 。 


图 2.132 RE [mr t 8 ja] 参数 


步骤 06 ”选中 【内 阴影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 白色 ，【 不 透明 度 】 更 改 为 60%， 
【距离 】 更 改 为 2 像素 ， 如 图 2.133 所 示 。 


图 2.133 ”设置 【内 阴影 】 参 数 


步骤 07 选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 距 
离 】 更 改 为 2 像素 ， 如 图 2.134 所 示 。 


图 2.134 设置 【投影 】 参 数 


步骤 08 选中 【外 上 友 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【线性 减 淡 (添加 ) 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 
改 为 红色 (R: 255, G: 0, B: 0) ，【 大 小 】 更 改 为 10 像 素 ， 完 成 乙 后 单 击 【确定 】 按 钮 ， 如 图 2.135 所 示 。 
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图 2.135 ”设置 【外 发 光 】〗 参数 


步骤 09 ”选中 【 算 形 1】 图 层 ， 将 图 形 同 右 侧 平 移 复 制 一 份 再 等 比 缩小 ， 将 生成 一 个 【矩形 1 拷贝 】 图 层 ， 并 将 【 算 形 1 找 
贝 】 图 层 样式 中 的 【外 友 光 】 图 层 样 式 删 除 。 


步骤 10 ”双击 【 算 形 1 拷贝 】 图 层 样式 名 称 ， 在 弹出 的 对 话 框 中 选中 【渐变 蔷 加 】 复 选 框 , 将 【渐变 】 更 改 为 灰色 (R: 
170, G: 173, B: 179) 到 灰色 (R: 210, G: 212, B: 217) ; 再次 将 图 形 复制 一 份 ， 将 生成 【矩形 1 拷贝 2】 图 层 ， 如 图 
2.136 所 示 。 
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图 2.136 ”复制 图 形 


步骤 11 同时 选中 【起 形 1 拷贝 】 及 【起 形 1】 图 层 ， 辐 左 侧 平移 复制 。 


步骤 12 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 选 项 ， 完 成 
之 后 按 Enter 键 确认 ， 如 图 2.137 所 示 。 


图 2.137 复制 并 变换 图 形 


步骤 13 ”选中 【 算 形 1 拷贝 】 图 层 ， 将 其 向 上 及 向 下 各 复制 一 份 并 将 图 形 旋 转 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 2.138 所 


图 2.138 ”了 最终 效果 


第 3 章 简约 扁平 化 图 标 设计 


III 


本 章 介绍 


本 章 讲解 简约 扁平 化 图 标 设计 ， 扁 平 化 图 标 最 大 的 特点 在 于 去 除 宛 余 、 


厚重 和 繁杂 的 装饰 ， 让 图 标本 身 重新 作为 核心 突显 ， 
TKT a. E, 


强调 了 抽象 、 极 简 和 符号 化 。 遍 平 化 图 标 让 整个 UI 界 面 变 得 和 干净、 整齐 ， 从 而 带 给 用 户 更 加 良好 的 操作 体验 ， 
得 益 于 简洁 的 图 像 元 素 设 计 ， 还 具有 降低 功 耗 、 延 长 待机 时 间 和 提高 运算 速度 的 效果 。 通 过 对 本 章 内 容 的 学 习 可 以 掌握 简约 扁平 
化 图 标的 设计 。 


要 操 索 引 


学 会 制作 简约 可 爱 大 眼 图 标 


.学习 制作 电量 管理 图 标 

. 学 会 制作 新 闻 图 标 

. 学 习 制 作 元 素 应 用 图 标 

. 掌握 通话 宝 图 标 绘制 

. 了 解 安全 防护 图 标 制作 流程 
. 学 会 制作 地 图 应 用 图 标 


. 学 会 制作 扁平 化 相机 图 标 


3.1 简约 可 爱 大 腿 图 标 


设计 构思 


本 例 讲 解 制作 简约 可 爱 大 眼 图 标 ， 该 图 标 以 经 典 的 大 眼 形象 为 主 视觉 ， 以 略微 夸张 的 手法 完美 表现 出 图 标的 主题 ， 最 终 效果 
如 图 3.1 所 示 。 


` 难 易 指数 : kk yc 
案例 位 置 : 源 文件 \ 第 3 章 \ 简 约 可 爱 大 眼 图 标 .psd 


` 视频 位 置 : 视频 教学 \3.1 简 约 可 爱 大 眼 图 标 .avi 


图 3.1 最 终 效 果 


底部 轮廓 大 眼 


主体 色 为 醒目 黄色 ， 以 深蓝 为 辅助 色 ， 整 个 图 标 将 可 爱 形象 表现 的 十 分 完美 。 


黄色 (R:238,G:196,B:51) 深蓝 色 (R:62 G:70,B:83) 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 二， 新 建 一 个 空 日 男 布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 算 形 工具 】  ”Y 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 238, G: 196, B: 51) , Dj 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 30 像素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.2 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【 李 圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 
个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.3 所 示 。 


图 3.2 2⁄4] |] # £#E3 


图 3.3 ”绘制 正 贺 
步骤 04 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Px jn, 在 菜 蛙 中 选择 【 淘 变 十 加 】 命 令 。 


步骤 05 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 白色 到 灰色 (R: 221, G: 226, B: 234) ，【 样 式 】 更 改 为 【 径 向 】， 
【角度 】 更 改 为 0，【 缩 放 】 更 改 为 150%， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 3.4 所 示 。 


一 刹 到 到 加 - 
sem z sJ be 
Mix: | [J Dm) 
样式 : | (Zü š | [vi 与 图 层 对 齐 们 ) 
Bm0: | 二 JE 


| Etu298hA iB 


图 3.4 Z&ja [#f F £#.26a] 参数 


步骤 06 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 将 
生成 【椭圆 1 拷贝 】 及 【椭圆 1 拷贝 2】 图 层 ， 如 图 3.5 所 示 。 


步骤 07 ”双击 【椭圆 1 拷贝 】 图 层 样式 名 称 ， 在 弹出 的 对 语 框 中 将 【 渐 概 】 更 改 为 深蓝 色 (R: 62, G: 70, B: 83) 到 深 
监 色 (R: 46, G: 50, B: 59) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 在 画布 中 将 图 形 等 比 缩小 ， 如 图 3.6 所 示 。 


图 3.5 复制 图 层 


图 3.6 ”缩小 图 形 


提示 与 近 巧 
为 了 方便 观察 效果 ， 在 编辑 下 方 图 形 时 ， 可 暂时 将 上 方 图 层 隐 藏 。 


步骤 08 ”选中 【椭圆 1 拷贝 2】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩 小 ， 完 成 之 后 按 Enter 键 确 
认 ， 疝 右上 角 方 向 移动 ， 如 图 3.7 所 示 。 


图 3.7 ”缩小 图 形 并 移动 


步骤 09 ”选择 工具 箱 中 的 【钢笔 工具 】 缉 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| EE 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 任意 颜色 ，【 描 边 】 更 改 为 无 ， 在 大 有 眼睛 下 方 绘制 一 个 嘴巴 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 3.8 
所 示 。 


步骤 10 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx JetH, (r3esBrB)ej [Wr2ez=e)n] 


人 人 
HD o 


步骤 11 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 (R: 255, G: 180, B: 0) 到 深 黄色 (R: 104, G: 54, B: O) , 
成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 3.9 所 示 。 


图 3.8 ”绘制 图 形 


图 3.9 ”添加 渐变 


步骤 12 ”选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| B — :| 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【 填 苑 】 更 改 为 任意 颜色 ，【 拉 边 】 更 改 为 无 ， 在 嘴巴 图 形 底 部 绘制 一 个 不 规则 图 形制 作 天 头 ， 将 生成 一 个 【形状 2】 
图 层 ， 如 图 3.10 所 示 。 

步骤 13 ”选中 【形状 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 产 按钮 ， 在 菜单 中 选择 【渐变 堵 加 】 命 令 。 
步骤 14 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 (R: 255, G: 180, B: 0) 到 透明 ，【 样 式 】 更 改 为 【 径 同 】，【 角 


度 】 更 改 为 0， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 3.11 所 示 。 


图 3.10 ”绘制 图 形 


图 3.11 添加 渐变 
步骤 15 ”选中 【形状 2】 图 层 ， 将 其 图 层 【 填 充 】 更 改 为 0%， 效 果 如 图 3.12 所 示 。 


步骤 16 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 人 在 嘴巴 图 形 左上 角 绘 制 一 个 灰色 (R: 235, G: 238, B: 243) 三 角形 图 形 ， 
以 制作 牙齿 ， 将 生成 一 个 【形状 3】 图 层 ， 如 图 3.13 所 示 。 


图 3.12 更 改 填充 


图 3.13 ”绘制 图 形 


步骤 17 在 【图 层 】 面 板 中 选中 【形状 3】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【形状 3 拷贝) 
==. 


步骤 18 选中 【形状 3 搁 贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 
【水 平 翻转 】 选 面 ， 完 成 之 后 按 Enter 键 确认 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 3.14 所 示 。 


图 3.14 最 终 效 果 


3.2 ”电量 官 理 图 标 


设计 构思 


本 例 讲 解 制作 电量 管理 图 标 ， 该 图 标 在 制作 过 程 中 模拟 出 插头 效果 ， 以 舒适 的 扁平 化 形式 直观 展示 ， 整 体 效果 十 分 自然 ， 具 
有 很 高 的 实用 性 ， 最 终 效 果 如 图 3.15 所 示 。 


. 难 易 指数 : kee 
. 案例 位 置 : 源 文件 \ 第 3 章 \ 电 量 管理 图 标 .psd 


` 视频 位 置 : 视频 教学 \3.2 电 量 管 理 图 标 .avi 


图 3.15 ”最终 效 果 


轮廓 插头 


主体 色 为 青色 ， 表 示人 安全 色 ， 以 黄色 作为 辅助 色 ， 体 现 出 醒目 警示 特征 。 


青色 (R:23,G:183,B:184) 黄色 (R:249,G:191,B:20) 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十 ， 新 建 一 个 空 日 男 布 。 


步骤 02， 选择 工具 箱 中 的 【椭圆 工具 】 重 ， 在 选项 栏 中 将 【填充 】 更 改 为 青色 (R: 23, G: 183, B: 184) ，【 描 边 】 
更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.16 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 249, G: 191, B: 20) , DB 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 0 像素， 绘制 一 个 圆 角 和 窍 形 ， 此 时 将 生成 一 个 【 圆 角 算 形 1】 图 层 ， 如 图 3.17 所 示 。 


图 3.16 ”绘制 正 圆 


图 3.17 绘制 图 形 


选择 工具 箱 中 的 【直接 选择 工具 】 心 ， 选 中 圆 角 和 矩形 顶部 的 锚 点 将 其 删除 ， 如 图 3.18 所 示 。 


同时 选中 项 部 剩余 的 两 个 销 点 并 向 上 拖 动 将 其 变形 ， 如 图 3.19 所 示 。 


图 3.18 ”删除 锚 点 


ÉJ3.19 6324 ë. 


选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 14, G: 87, B: 105) , DJE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 ?0 像素 ， 在 图 形 底部 再 次 绘制 一 个 圆 角 算 形 ， 将 生成 一 个 【 圆 角 算 形 2】 图 层 ， 并 将 其 移 到 【 圆 
角 和 矩形 1】 图 层 下 方 ， 如 图 3.20 所 示 。 


以 同样 的 方法 在 圆 角 和 矩形 底部 再 次 绘制 一 个 稍 细 的 浅 蓝 色 (R: 138, G: 242, B: 251) 圆 角 算 形 ， 将 生成 一 个 
【 圆 角 算 形 3】， 并 将 其 移 到 【 圆 角 和 窍 形 2】 图 层 下方 ， 如 图 3.21 所 示 。 


图 3.20 ”绘制 图 形 


图 3.21 绘制 稍 细 图 形 


选中 【 圆 角 和夫 形 3】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴花 版 】 命 令 ， 为 当前 图 层 创建 筋 贴 蒙 版 ， 隐 藏 部 分 
图 形 ， 如 图 3.22 所 示 。 


图 3.22 ”创建 剪贴 蒙 版 


选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 力 ， 在 黄色 图 形 左上 角 位 置 绘制 一 个 细 长 的 圆 角 和 矩形 ， 将 【填充 】 更 改 为 浅 蓝 
€, (R: 212, G: 251, B: 255) ， 并 将 绘制 的 圆 角 和 矩形 向 右 侧 平 移 复制 一 份 ， 如 图 3.23 所 示 。 


图 3.23 ”绘制 图 形 


选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 蓝 色 (R: 212, G: 251, B: 255) , D 
边 】 更 改 为 无 ， 在 黄色 图 形 位 置 绘制 一 个 算 形 ， 此 时 将 生成 一 个 【和 窍 形 1】 图 层 ， 并 将 图 形 复制 一 份 ， 如 图 3.24 所 示 。 


图 3.24 绘制 图 形 并 复制 


步骤 11 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 :按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 黄色 (R: 249, G: 191, B: 20) ，【 摘 边 】 更 改 为 无 ， 在 图 标 靠 项 部 位 置 绘制 一 个 电量 标识 图 形 ， 
这 样 束 完成 了 效果 的 制作 ， 如 图 3.25 所 示 。 


图 3.25 最终 效 果 


33 ”新 闻 图 标 


设计 构思 


本 例 讲解 制作 新 闻 图 标 ， 此 款 图 标 在 制作 过 程 中 以 圆 形 为 主 轮 慷 ， 与 矩形 相 结 合 ， 表 现 出 新 闻 图 标 应 有 的 特征 ， 最 终 效 果 如 


图 3.26 所 示 。 
. 难 易 指 数 ， kk c Yc 
. 案例 位 置 : 源 文件 \ 第 3 章 \ 新 闻 图 标 .psd 


“ 视频 位 置 : 视频 教学 \3.3 新 闻 图 标 .avi 


图 3.26 ”最 终 效 果 


重点 分 解 
Esl 
新 闻 内 容 
色彩 分 析 


主体 色 为 蓝 色 ， 以 黄色 作为 点 级 色 ， 蓝 色 作 为 新 闻 标 识 色 ， 表 示 科 技 ， 而 黄色 表示 警示 、 新 闻 内 容 等 信息 


ES 
1 (R:23,G:152,B:253) 黄色 (R:255,G:195,B:61) 


操作 步骤 

步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 男 布 。 

步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 条 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 23, G: 152, B: 253) ，【 描 边 】 
更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.27 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 导 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 】 
色 层 。 


步骤 04 将 【椭圆 1 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 黄色 (R: 245, G: 195, B: 61) ， 再 按 Ctrl+T 组 合 键 对 图 形 执行 
【 目 由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 乙 后 近 Enter 键 确认 ， 如 图 3.28 所 示 。 


图 3.27 ”绘制 图 形 


图 3.28 复制 并 变换 图 形 


步骤 05 ”选择 工具 箱 中 的 【直接 选择 工具 】 * ， 选 中 正 圆 顶 部 的 锚 点 将 其 删除 ， 如 图 3.29 所 示 . 


步骤 06 ”选择 工具 箱 中 的 【和 矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 246, G: 246, B: 246) , [## 
边 】 更 改 为 无 ， 在 半圆 顶部 位 置 绘制 一 个 矩形 ， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 3.30 所 示 . 


图 3.29 ”删除 锚 点 


图 3.30 22) EJE 


步骤 07， 在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 出 【矩形 1 拷贝 】 及 
【 丰 形 1 拷贝 2】 两 个 新 图 层 ， 如 图 3.31 所 示 。 


步骤 08 分别 选中 【起 形 1 拷贝 】 及 【和 起 形 1】 图 层 ， 将 其 更 改 为 稍 深 的 颜色 并 缩小 图 形 宽 度 ， 如 图 3.32 所 示 。 


图 3.31 复制 图 层 


fE, 


图 3.32 ”缩小 图 形 


步骤 09 ”选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 矩形 位 置 再 次 绘制 数 个 矩形 以 制作 内 容 ， 如 图 3.33 所 示 。 


步骤 10 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 适当 位 置 添加 文字 (方正 兰亭 细 黑 _GB) 
如 图 3.34 所 示 。 


， 这 样 束 完成 了 效果 的 制 


图 3.33 Zh] EJ 


图 3.34 ”最终 效果 


34 无线 应 用 图 标 


设计 构思 


本 例 讲 解 制作 无 线 应 用 图 标 ， 该 图 标 以 十 分 形象 的 无 线 符号 与 渐变 轮廓 图 形 组 成 ， 整 个 图 标 具 有 十 分 出 色 的 科技 感 ， 最 终 效 
果 如 图 3.35 所 示 。 


. 难 易 指数 : 真 交 六 交 六 
案例 位 置 : 源 文件 \ 第 3 章 \ 无 线 应 用 图 标 .psd 


` 视频 位 置 : 视频 教学 \3.4 无 线 应 用 图 标 .avi 


图 3.35 ”最终 歼 采 


重点 分 解 
无 线 标识 
色彩 分 析 


以 科技 蓝 色 与 神秘 紫色 搭配 ， 将 整个 图 标的 特征 及 色彩 表现 的 相当 完美 ， 同 时 也 具有 出 色 的 可 识别 性 。 


w w |jpp, i X < 1 ph 
蓝 色 (R:0,G:174,B:255) 紫色 (R:255,G:195,B:61) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
汰 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 男 布 。 


步骤 02， 选 择 工 具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
20 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.36 所 示 。 


步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 窍 形 1】 图 层 ， 单 击 面板 撒 部 的 【添加 图 层 样式 】 Pe JetH, G(raesBrR)iejë [Bree = 


加 】 命 令 。 


步骤 04， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 (R: 175, G: 96, B: 255) 到 蓝 色 (R: 0, G: 174, B: 255) , 
【缩放 】 更 改 为 1509%， 完 成 之 后 单 击 【 和 确定】 按钮， 效果 如 图 3.37 所 示 。 


图 3.36 ”绘制 圆 角 矩形 


图 3.37 ”设置 渐变 


步骤 05 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 6 


步骤 06 在 图 标 中 间 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 单 击 【 设 置 形状 描 边 类 型 )】 
一 一 :| 按钮， 在 弹出 的 选项 中 单 击 【端点 】 按 钮 ， 在 弹出 的 选项 中 选择 第 二 种 圆 形 描 边 类 型 ， 效 果 如 图 3.38 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【添加 锚 点 工具 】 区 ， 分 别 在 正 圆 左下 角 及 右 下 角 位 置 单 击 添加 锚 点 ， 如 图 3.39 所 示 。 


图 3.38 ”绘制 正 圆 


图 3.39 ”添加 锚 点 


步骤 09 ”选择 工具 箱 中 的 【直接 选择 工具 】* ， 选 中 正 圆 底部 锚 点 ， 将 其 删除 ， 如 图 3.40 所 示 。 


步骤 10 选中 【椭圆 1】 图 层 ， 将 其 复制 两 份 ， 再 分 别 选中 两 个 新 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 分 别 
将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.41 所 示 。 


图 3 
.40 “删除 锚 点 


图 3.41 复制 图 形 并 变换 


步骤 10 ”选择 工具 箱 中 的 【矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 
和 矩形， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 3.42 所 示 。 


步骤 11 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 乙 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 再 将 宽 
度 适 当 缩 小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.43 所 示 。 


图 3.42 ”绘制 矩形 


选 


图 3.43 


变换 图 形 


择 工具 箱 中 的 【直接 选择 工具 】 必 ， 选 中 和 矩形 底部 锚 点 ， 


将 其 删除 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 3.44 所 


图 3.44 最终 效 果 


很 好 地 表现 出 通话 特征 ， 最 终 效果 如 图 3.45 所 示 。 


设计 构思 


` ` —— s 
35 ”通话 宝 图 标 
本 例 讲 解 制 作 通 话 宝 图 标 ， 该 图 标 以 彩色 背景 与 信息 图 形 相 结合 ， 
难 易 指数 : 次 六 六 交 六 
素材 位 置 : 调用 素材 \ 第 3 章 \ 通 话 宝 图 标 
源 文件 \ 第 3 章 \ 通 话 宝 图 标 .psd 


生 例 位 置 
视频 教学 \3.5 通 话 宝 图 标 .avi 


视频 位 置 


图 3.45 “最终 效果 


重点 分 解 
标识 
色彩 分 析 


绿色 与 蓝 色 相 搭 配 ， 以 醒目 的 绿色 标识 突出 图 标的 特征 。 


i. 
KË (R:98,G:156,B:23) 监 色 (R:118,G:199,B:237) 


执行 菜单 柱 中 的 【文件 】| 【新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 为 72 像 素 / 严 十， 新 建 一 个 空 日 画布 。 
选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 青色 (R: 118, G: 199, B: 237) , D 


边 】 更 改 为 无 ，【 半 径 】 更 改 为 20 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.46 所 示 。 


-二 > ya ! 

use T B $8rhi5 MS T 1] £ ”， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 和 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 

状 】， 将 【填充 】 更 改 为 绿色 (R: 88, G: 236, B: 151) ，【 摘 边 】 更 改 为 无 ， 在 图 形 右 侧 位 置 绘制 一 个 不 规则 图 形 ， 将 生 
成 一 个 【形状 1】 图 层 ， 如 图 3.47 所 示 。 


图 3.46 ”绘制 圆 角 矩形 


图 3.47 ”绘制 图 形 


步骤 04 ”选中 【形状 1】 图 层 ， 执行 菜单 栏 中 的 【图 层 】|【 创 建 草 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 
形 ， 如 图 3.48 所 示 。 


图 3.48 ”创建 剪贴 蒙 版 


， 分 别 将 图 形变 


步骤 05 ”选中 【形状 1】 图 层 ， 将 其 复制 两 份 ， 并 分 别 更 改 复制 生成 的 图 形 颜色 ， 在 画布 中 拖 动 图 形 锁 点 
形 ， 如 图 3.49 所 示 。 
图 3.49 复制 并 变换 图 形 


F2 


L, -zk V Ç 


此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.50 所 示 。 


+ 
选择 工具 箱 中 的 【添加 锚 点 工具 】 Z” ， 在 贿 圆 左下 角 位 置 单 击 添加 两 个 锚 点 ， 如 图 3.51 所 示 . 


06 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 椭圆 图 形 ， 


图 3.50 2] 4 


图 3.51 Z82640 S. 


步骤 08 ”选择 工具 箱 中 的 【转换 点 工具 】 作 及 【直接 选择 工具 】 Ë ， 单 击 或 拖 动 锚 点 控制 杆 ， 将 图 形变 形 ， 如 图 3.52 所 


步骤 09 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 3 草 \ 通 话 宝 图 标 \ 符 号 .psd” 文 件 ， 单 击 【 打 开 】 按 
钮 ， 将 打开 的 素材 拖 入 画布 椭圆 位 置 ， 将 其 适当 缩小 并 更 改 为 绿色 (R: 98, G: 156, B: 23) ， 这 样 束 完成 了 效果 的 制作 ， 如 
图 3.53 所 示 。 


图 3.52 ”将 椭圆 变形 


图 3.53， 最终 效 采 


3.6 简洁 下 载 图 标 


本 例 讲解 制作 简洁 下 载 图 标 ， 该 图 标 整 体 十 分 简洁 ， 


. 难 易 指数 : kk 
. 案例 位 置 : 源 文件 \ 第 3 章 \ 简 洁 下 载 图 标 .psd 


` 视频 位 置 : 视频 教学 \3.6 简 洁 下 载 图 标 .avi 


设计 构思 


以 经 典 的 渐变 轮廓 与 直观 的 下 载 样式 图 标 相 


zL 2 


“2 V? 5 


最 终 效 果 如 图 3.54 所 


重点 分 解 
装饰 环 下 载 图 示 
色彩 分 析 


主体 色 为 紫色 及 青色 ， 以 日 色 为 辅助 色 ， 整 体 色 调 表 现 出 很 强 的 图 标 特征 。 


F o | 
紫色 (R:106,G:103,B:140) 青色 (R:35,G:120,B:240) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 男 布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
25 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.25 所 示 。 


步骤 03 “在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 贡 按 钮 ， 在 菜单 中 选择 【渐变 赫 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 (R: 40, G: 40, B: 70) 到 紫色 (R: 106, G: 103, B: 140) ， 完 成 
之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 3.56 所 示 。 


图 3.55 ”绘制 圆 角 矩形 


图 3.56 ”添加 渐变 


步骤 04 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 12 
扣 ， 在 图 标 位 置 按 住 Shift 刍 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.57 所 示 。 


步骤 05 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按钮 ， 在 菜单 中 选择 【渐变 址 加 ) 
命令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 青色 (R: 35, G: 120, B: 240) 到 蓝 色 (R: 70, G: 250, B: 218) ， 完 成 之 后 
单 击 【 确 定 】 按 钮 ， 效 果 如 图 3.58 所 示 。 


图 3.57 ”绘制 图 形 


图 3.58 添加 渐变 


选择 工具 箱 中 的 【和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 再 绘制 一 个 矩形 ， 此 


时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 3.59 所 示 。 
中 【 目 形 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变 损 】 谷 令 ， 当 出 现 变 形 框 乙 后 ， 在 选项 栏 的 【旋转 】 文 本 


E TIHz/íY 7 ` 
— JZK V ! 
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框 中 输入 45， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.60 所 示 。 


图 3.59 ”绘制 图 形 


图 3.60 Z%3⁄4EJE 


步骤 08 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ñ ， 选 中 和 矩形 顶部 锚 点 ， 将 其 删除 以 制作 三 角形 ， 如 图 3.61 所 示 。 


步 又 09 ”选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【 描 边 】 更 改 为 白色 ，【 粗 细 】 更 改 为 10 像 素 ， 在 三 角形 上 方 按 
住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 3.62 所 示 。 


图 3.61 制作 三 角形 


图 3.62 ”绘制 线段 


步骤 10， 选 择 工具 箱 中 的 【和 矩形 工具 】 辆 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 3 
扣 ， 人 在 箭头 底部 绘制 一 个 和 矩形， 此 时 将 生成 一 个 【和 矩 形 2】 图 层 ， 如 图 3.63 所 示 。 


图 3.63 ”绘制 矩形 


图 3.64 Z82652 2. 


【形状 1】 及 【矩形 1】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【图 示 】， 


步骤 12 ”同时 选中 【矩形 2】、 


sb 


如 图 3.65 所 示 。 
步骤 13， 在 【图 层 】 面 板 中 选中 【图 示 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 意 按钮 ， 在 菜单 中 选择 【渐变 茎 加 】 
蓝 色 (R: 239, G: 238, B: 247) , 


蓝 色 (R: 153, G: 149, B: 194) 到 淡 


qI) 


= 
= /类 


令 ， 在 弹出 的 对 语 框 中 将 【渐变 】 更 改 为 
成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 3.66 所 示 。 


e. mm s ü 
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图 3.65 ”将 图 层 编组 


图 3.66 ”添加 渐变 


步骤 14 ”选择 工具 箱 中 的 【 椭 贺 工具 】 量 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 标底 部 位 置 绘制 
一 个 椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.67 所 示 。 


步骤 12 执行 菜单 杜 中 的 【 渡 镜 】| 【模糊 】|【 蜗 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 人 化】 按钮， 然后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 3.68 所 示 。 


图 3.67 ”绘制 椭 


图 3.68 ”添加 高 斯 模糊 


步骤 16 ”选中 【椭圆 2】 图 层 ， 将 其 图 层 【 不 透明 度 】 更 改 为 60%， 这 样 就 完成 了 效果 的 制作 ， 如 图 3.69 所 示 。 


图 3.69 最终 效 果 


设计 构思 


本 例 讲 解 制作 安全 防护 图 标 ， 该 图 标 以 雨伞 作为 主体 图 像 ， 将 安全 的 特征 表现 的 十 分 形象 ， 最 终 效 果 如 图 3.70 所 示 。 
. 难 易 指数 : kk << 
案例 位 置 : 源 文件 \ 第 3 章 \ 安 全 防护 图 标 .psd 


“ 视频 位 置 : 视频 教学 \3.7 安 全 防护 图 标 .avi 


图 3.70 ”最 终 效 果 


重点 分 解 
轮廓 图 示 
色彩 分 析 


主体 色 为 中 性 蓝 ， 以 浅 红 色 为 辅助 色 ， 整 体 色 调 表现 出 很 强 的 安全 特征 及 科技 感 。 


| 
蓝 色 (R:184,G:212,B:231) 红色 (R:225,G:30,B:47) 


3.7.1 绘制 主 视 克 图 像 


绘制 小 企图 像 


小 伞 图 像 


操作 步 又 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令 ， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 斗 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 六， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 184, G: 212, B: 231) , DHE 
边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.71 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工 具 模式 】| 路 径 ?| 按钮 ， 在 弹出 的 选项 中 选择 
【形状 】， 将 【 填 序 】 更 改 为 红色 (R: 233, G: 90, B: 73) ，【 摘 边 】 更 改 为 无 ， 在 正 圆 左上 角 绘 制 一 个 1/4 圆 ， 如 图 3.72 
所 示 。 


图 3.71 ”绘制 圆 角 和 矩形 


图 3.72” 绘制 图 形 


步骤 04 ”选择 工具 箱 中 的 【椭圆 工具 】 量 ， 在 选项 栏 中 将 【填充 】 更 改 为 红色 (R: 225, G: 30, B: 47) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 正副 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.73 所 示 。 


步骤 05 ”执行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 命 令 ， 为 当前 图 层 创 建 剪 贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 3.74 所 示 。 


图 3.73 ”绘制 正 


图 3.74 创建 剪贴 蒙 版 


步骤 06， 在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 瑟 按钮 上 ， 复 制 一 个 【椭圆 2 拷贝 】 
图 层 ， 如 图 3.75 所 示 。 


步骤 07 ”将 【椭圆 2 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 灰色 (R: 235, G: 228, B: 229) ， 按 Ctrl+T 组 合 键 对 其 执行 【 自 
变换 】 人 命令， 将 图 像 沉 度 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.76 所 示 。 


图 3.75 复制 图 层 


83.76 ZJ] E 


步骤 08 ”同时 选中 【形状 1】、【 椭 圆 2】 及 【椭圆 2 拷贝 】 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 生 成 一 个 【组 1】 组 ， 按 
Ctrl+E 组 合 键 将 组 合并 ， 将 生成 一 个 【组 1】 图 层 ， 如 图 3.77 所 示 。 


步骤 09 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 图 形 底部 绘制 一 个 不 规则 封闭 路 径 ， 如 图 3.78 所 示 。 


图 3.78 ”绘制 封闭 路 径 


步骤 10 按 Ctrl+Enter 组 合 键 将 路 径 转换 为 选区 ， 如 图 3.79 所 示 。 


步骤 11 选中 【组 1】 图 层 ， 将 图 像 删除 ， 完 成 乙 后 按 Ctrl+ D 组 合 键 取消 选区 ， 如 图 3.80 所 示 。 


图 3.79 ”转换 选区 


图 3.80 ”删除 图 像 


步骤 12 在 【图 层 】 面 板 中 选中 【组 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【组 1 拷贝 】 


步 又 13” 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 命 令 ， 完 成 
之 后 按 Enter 键 确认 ， 将 图 像 向 右 侧 平移 ， 如 图 3.81 所 示 。 


步骤 14 ”选择 工具 箱 中 的 【直线 工具 】A ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 62, G: 70, B: 83) ，【 描 边 ] 更 
改 为 无 ，【 粗 细 】 更 改 为 3 像素 ， 按 住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 3.82 所 示 。 


图 3.81 复制 图 像 


图 3.82 ”绘制 线段 


步骤 15 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 深蓝 色 (R: 62, G: 
70, B: 83) ，【 宽 度 】 更 改 为 6 点 ，【 半 径 】 更 改 为 90 像素 。 


步骤 16 “绘制 一 个 圆 角 和 矩形 ， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 层 ， 单 击 【设置 形状 措 边 类 型 】 一 一? 按钮 ， 在 弹出 的 面板 
中 单 击 【 痛 点 】 下 方 按钮 ， 在 弹出 的 选项 中 选择 第 二 种 圆 形 类 型 ， 效 果 如 图 3.83 所 示 。 


图 3.83 2] BE] # 4E34 


图 3.84 ”删除 锚 点 


图 3.85 ”变换 图 形 


3.7.2 ”制作 痿 饰 效 果 


制作 投影 


投影 效果 


步骤 01 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】[ 内 | 按 乌 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 蓝 色 (R: 146, G: 175, B: 194) ，【 描 边 】 更 改 为 无 ， 在 雨伞 图 像 位 置 绘 制 一 个 不 规则 图 形 ， 将 
生成 的 【形状 2】 图 层 移 至 【椭圆 1】 图 层 上 方 ， 如 图 3.86 所 示 。 


图 3.86 ”绘制 不 规则 图 形 


步骤 02 选中 【形状 2】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 皮 ， 隐 藏 部 分 图 
像 ， 如 图 3.87 所 示 。 
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图 3.87 ”创建 剪贴 蒙 版 


又 03， 选择 工具 箱 中 的 【渐变 工具 】 芽 ] ， 编 辑 黑色 到 白色 的 渐变 ， 单 击 选 项 栏 中 的 【线性 渐变 】 圈 按钮 ， 在 图 形 上 拖 
部 分 图 形 隐藏 以 制作 阴影 效果 ， 这 样 融 完 成 了 效果 的 制作 ， 如 图 3.88 所 示 。 


图 3.88 最终 效果 


3.8 男 要 图 标 


设计 构思 
本 例 讲解 制作 画板 图 标 ， 该 画板 图 标 以 多 彩 的 图 形 组 成 ， 很 好 地 表现 出 画板 的 色彩 特征 ， 最 终 效 果 如 图 3.89 所 示 。 
. 难 易 指 数 : kk ye Ye Yk 
' 案例 位 置 : 源 文 件 \ 第 3 章 \ 画 板 图 标 .psd 


. 视频 位 置 : 视频 教学 \3.8 画 板 图 标 .avi 


图 3.89 最终 效 果 


重点 分 解 


以 蓝 色 作 为 整体 画板 主体 色 ， 橙 和 色 作 为 辅助 色 ， 多 彩 的 颜色 将 整个 画板 的 特征 表现 得 十 分 完美 。 


K 
监 色 (R:104,G:206,B:226) 得 色 (R:251,G:74,B:27) 


3.8.1 制作 主 视 多 图 形 


绘制 主 轮 万 


制作 颜料 盒 


主 视觉 图 形 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 贡 七， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 104, G: 206, B: 226) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 80 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.90 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 碟 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅黄 色 (R: 240, G: 233, B: 223) , DJ 
边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.91 所 示 。 


图 3.90 ”绘制 圆 角 和 矩形 


图 3.91 22] E [Ej 


步骤 04 在 正 圆 直上 角 再 次 绘制 一 个 小 正 圆 ， 将 其 【填充 】 更 改 为 红色 (R: 243, G: 54, B: 41) ，【 摘 边 】 更 改 为 
无 ， 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.92 所 示 。 


步骤 05 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【内 阴影 命 
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步骤 06 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 不 透明 度 】 更 改 为 20%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 
【角度 】 更 改 为 123 度 ，【 距 离 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 3.93 所 示 。 


图 3.92 ”绘制 正 圆 


vk 


图 3.93 ”添加 内 阴影 


【 ) 


图 3.94 复制 图 形 


3.8.2 ”制作 辅助 图 像 


绘制 画笔 


步骤 01 选择 工具 箱 中 的 【矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 楼 色 (R: 251, G: 74, B: 27) ，【 描 边 】 更 
改 为 无 ， 绘 制 一 个 矩形， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 3.95 所 示 。 


步骤 02 ” 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 适 视 】 合 令 ， 拖 动 变 形 
框 控制 点 ， 将 图 形变 形 ， 完 成 乙 后 按 Enter 键 确认 ， 如 图 3.96 所 示 。 


图 3.95 ”绘制 矩形 


图 3.96 ”将 图 形变 形 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 图 形 顶 部 位 置 按 住 Shift 键 以 合并 形状 的 形式 绘制 一 个 正 圆 图 形 ， 将 尖 头 变 成 
圆 头 ， 如 图 3.97 所 示 。 


步骤 04 在 【和 矩形 1】 图 层 名 称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 菜 蛙 中 选择 【 栅 格 化 图 层 】 命 令 。 


又 05 ”选择 工具 箱 中 的 【和 矩形 选 框 工具 】 六 J， 在 图 像 底部 绘制 一 个 矩形 选区 ， 以 选中 部 分 图 像 ， 如 图 3.98 所 示 。 


a 


图 3.97 ”绘制 图 形 


图 3.98 绘制 选区 


步骤 06 在 【图 层 】 面 板 中 选中 【和 丰 形 1】 图 层 ， 单 击 面板 上 方 的 【锁定 透明 像素 】 图 按钮 锁定 透明 像素 ， 将 选区 中 图 
像 填 序 为 深 杰 色 (R: 61, G: 64, B: 71) ， 填 充 完成 之 后 册 次 单 击 此 按钮 解除 锁定 ， 如 图 3.99 所 示 。 


图 3.99 ”锁定 透明 像素 并 填充 颜色 


307 ”选择 工具 箱 中 的 【钢笔 工具 】, 殉 ， 在 选项 栏 中 单 击 【 选 择 工 具 模式 】| 路 径 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 黄色 (R: 247, G: 172, B: 104) ，【 描 边 】 更 改 为 无 ， 在 图 形 底部 绘制 一 个 不 规则 图 形 ， 以 制作 
笔头 效果 ， 如 图 3.100 所 示 。 


Nu 


步骤 08 同时 选中 【和 矩形 1】 及 【形状 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 人 命令， 将 图 形 适当 旋转 ， 完 成 之 后 
按 Enter 键 确认 ， 如 图 3.101 所 示 。 


图 3.100 ”绘制 笔头 图 形 


图 3.101 旋转 图 形 


步 又 09 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 ËL 按钮 ， 为 其 添加 图 层 蒙 版 。 


步骤 10 选择 工具 箱 中 的 【渐变 工具 】 因 ,编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 冉 按钮 ， 在 图 形 上 拖 


将 部 分 图 形 隐藏 ， 这 样 残 完成 了 效果 的 制作 ， 如 图 3.102 所 示 。 


图 3.102 最终 效 果 


3.9 个 性 化 手表 图 标 


设计 构思 


本 例 讲 解 制 作 个 性 化 手表 图 标 ， 该 图 标 制作 过 程 非常 简单 ， 通 过 绘制 手表 轮 慷 及 表盘 即 可 完成 效果 制作 ， 最 终 效 果 如 图 
3.103 所 示 。 


. 难 易 指数 : Ok ykxyc y 
" 案例 位 置 : 源 文件 \ 第 3 章 \ 个 性 化 手表 图 标 .psd 


“ 视频 位 置 : 视频 教学 \3.9 个 性 化 手表 图 标 .avi 


图 3.103 ”最 终 效 有 果 


重点 分 解 


主体 色 为 高 雅 紫 ， 与 暖 黄色 搭配 ， 整 体 色 调 给 人 一 种 十 分 时 尚 的 视 党 感 。 


OE 
紫色 (R:85,G:24,B:109) 浅 紫 色 (R:176,G:65,B:158) 黄色 (R:255,G:228,B:0) 


3.9.1 ”制作 主 轮 局 


上 一 绘制 图 标 轮廓 


制作 表盘 


制作 表 市 


主 轮廓 图 形 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十 ， 新 建 一 个 空 日 贺 布 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 意 ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 85, G: 24, B: 109) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.104 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【表盘 】、【 轮 廊 】， 如 图 3.105 所 示 。 


图 3.104 ”绘制 图 形 


图 3.105 复制 图 层 


步骤 04 ”选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 255, G: 228，B: 0) ，【 描 边 】 更 
改 为 无 ， 在 正 圆 中 间 绘 制 一 个 矩形 ， 此 时 将 生成 一 个 【起 形 1】 图 层 ， 如 图 3.106 所 示 。 


步骤 05 ”将 窍 形 向 左 侧 平移 复制 一 份 ， 生 成 一 个 【和 矩 形 1 拷贝 】 图 层 ， 并 将 【 算 形 1 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 浅 紫 
色 (R: 176, G: 65, B: 158) ， 如 图 3.107 所 示 。 


图 3.106 ”绘制 矩形 


图 3.107 ”复制 矩形 


步骤 06 ”选中 【和 矩形 1 拷贝 】 图 层 ， 将 图 形 同 右 侧 平移 复制 一 份 ， 生 成 一 个 【和 矩形 1 拷贝 2】 图 层 ， 如 图 3.108 所 示 。 


步骤 07 同时 选中 【和 矩形 1 拷贝 2】、【 和 矩形 1 拷贝 】 及 【和 矩形 1】 图 层 ， 执行 菜 单 栏 中 的 【图 层 】| 【创建 问 贴 蒙 版 】 命 令 ， 
为 当前 图 层 创建 前 贴 蒙 版 ， 隐 藏 不 需要 的 图 形 ， 如 图 3.109 所 示 。 


图 3.108 复制 图 形 


图 3.109 ”创建 剪贴 蒙 版 


步骤 08 选中 【表盘 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 人 命令， 将 图 形 等 比 缩小 ， 在 选项 栏 中 将 【填充 】 更 改 
为 白色 ，【 描 边 】 更 改 为 浅 蓝 色 (R: 219, G: 228, B: 234) ，【 宽 度 】 更 改 为 8 点 ， 效 果 如 图 3.110 所 示 。 


步骤 09 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 蓝 色 (R: 219, G: 228, B: 234) ， 
【 描 边 】 更 改 为 无 ， 在 正 圆 位 置 绘制 一 个 圆 角 矩形， 生成 一 个 【 圆 角 矩形 1】 图 层 ， 将 其 移 至 【矩形 1】 图 层 下 方 ， 如 图 3.111 所 


小 \。 


图 3.110 ”缩小 图 形 


图 3.111 ”绘制 图 形 


提示 与 技巧 


将 【 圆 角 矩 形 1】 图 层 移 至 【 算 形 1】 图 层 下 方 之 后 ， 将 自动 创建 草 贴 蒙 版 ， 不 会 影响 图 形 显 示 效果 ， 因 此 无 须 理会 。 


3.9.2 ”绘制 细节 元 率 


制作 指针 


指针 效果 


步骤 01 ”选择 工具 箱 中 的 【矩形 工具 】 转 | ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 85, G: 24, B: 109) ，【 描 边 】 更 
改 为 无 ， 在 表盘 位 置 绘制 一 个 细 长 窍 形 ， 此 时 将 生成 一 个 【 算 形 2】 图 层 ， 如 图 3.112 所 示 。 


步骤 02 ” 按 住 Alt 键 在 炬 形 位 置 再 次 绘制 一 个 算 形 路 径 ， 将 部 分 目 形 减 去 ， 如 图 3.113 所 示 。 


图 3.112 ”绘制 细 长 矩形 


图 3.113 ” 减 去 图 形 


提示 与 技巧 


在 制作 指针 时 ， 可 利用 【给 形 工具 】 制 作 ， 也 可 以 使 用 【直线 工具 】 制 作 ， 用 户 可 以 选择 一 种 自己 习惯 的 方法 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 岗 按钮 上 ， 复 制 一 个 【矩形 2 拷贝 】 
图 层 ， 如 图 3.114 所 示 ， 


步骤 04 按 Ctrl+T 组 合 键 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【旋转 90 度 ( 顺 时 针 ) 】 命 
， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.115 所 示 。 


少 


图 3.114 复制 图 层 


图 3.115 ”旋转 图 形 


步骤 05 ”选择 工具 箱 中 的 【椭圆 工具 】 意 ， 在 表盘 中 间 位 置 按 住 At+ Shift 组 合 键 以 中 心 为 起 点 ， 绘 制 一 个 正 圆 路 径 ， 如 图 
3.116 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 路 径 上 单 击 输入 多 个 “|” 字符 (Humnst777) 以 制作 刻度 ， 如 图 3.117 


图 3.116 2 h] Z 4 


图 3.117 制作 刻度 


提示 与 技巧 
在 绘制 路 径 时 ， 需 要 注意 在 选项 栏 中 确认 为 【路 径 】 选 项 。 
步骤 07 ”在 字符 图 层 名 称 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 格 化 文字 】 合 令 ， 栅 格 化 文字 ， 如 图 3.118 所 示 。 


又 08 ”选择 工具 箱 中 的 【矩形 选 框 工具 】 关 : ， 在 左 侧 刻度 位 置 绘制 一 个 选区 ， 如 图 3.119 所 示 。 


S 


图 3.118 J4648L x + 


图 3.119 ”绘制 选区 


步骤 09 按 Delete 键 将 选区 中 的 图 像 删 除 ， 完 成 乙 后 按 Ctrl+ D 组 合 键 取消 选区 ， 如 图 3.120 所 示 。 


图 3.120 ”删除 图 像 


步骤 10 ”选择 工具 箱 中 的 【直线 工具 】《， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 85, G: 24, B: 109) ，【 描 边 】 更 
改 为 无 ，【 粗 细 】 更 改 为 3 像素 ， 在 表盘 中 间 位 置 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 3.121 所 示 。 


步骤 11 ”以 同样 的 方法 分 别 绘制 两 条 【粗细 】 为 2 像素 和 1 像素 的 线段 ， 以 制作 分 针 和 和 秒针， 这样 束 完成 了 效果 的 制作 ， 如 
图 3.122 所 示 。 


图 3.121 ”绘制 时 针 


图 3.122 最终 效 有 果 


310 云 盘 图 标 


设计 构思 


本 例 讲解 制作 云 盘 图 标 ， 该 图 标 以 云 条 为 主 图 形 ， 与 下 载 样式 图 形 相 结合 完成 整个 图 标的 制作 ， 最 终 效果 如 图 3.123 所 示 。 
难 易 指数 : kok Yc Yc Ye 
案例 位 置 : 源 文件 \ 第 3 章 \ 云 盘 图 标 .psd 


. 视频 位 置 : 视频 教学 \3.10 云 盘 图 标 .avi 


图 3.123 最终 效果 


重点 分 解 
# EE Z BU Š 
云 米 下 载 荫 头 

色彩 分 析 


主 色 调 为 蓝 色 ， 以 橙色 为 辅助 色 ， 整 体 色 调 体现 出 云 盘 科技 的 特点 。 


于 
蓝 色 (R:63,G:188,B:232) 橙色 (R:255,G:174,B:0) 


3.10.1 绘制 图 标 主 轮 启 


制作 云图 形 


主体 轮廓 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令 ， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 起 形 工具 】 ə 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
20 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.124 所 示 。 


Z< 
Xo 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按 钮 ， 在 菜单 中 选择 【渐变 畦 
加 】 命 人 


步骤 04 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 52, G: 154, B: 203) 到 蓝 色 (R: 63, G: 188, B: 232) , 
完成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 3.125 所 示 。 


图 3.124 ”绘制 圆 角 矩形 


图 3.125 ”添加 渐变 


步骤 05 ”选择 工具 箱 中 的 【 圆 角 起 形 工具 】 əe Trieli=rHi$ DDBZ] SEE, Dau] SEX, ["MÉEí€&] SEPKUS 
50068g5s, Z#b)—"[EIf82BRZ, HrHJiS#Epk— 4 [EJF82BRZ21 sl, #nEz3.126FFR2<. 


步骤 06 j&FETEšsrhig DBEEJT B] @ ， 按 住 shift 刍 在 圆 角 和 矩形 右 侧 位 置 绘制 一 个 正 圆 ， 如 图 3.127 所 示 。 


图 3.126 ”绘制 圆 角 和 矩形 


图 3.127 ”绘制 正 圆 


工具 】 Ë ， 按 住 Alt 键 拖 动 ， 将 正 圆 复制 一 份 ， 如 图 3.128 所 示 。 


图 3.128 复制 图 形 


3.10.2 ”绘制 特征 图 示 


制作 下 载 图 示 


下 载 图 示 


步骤 01 选择 工具 箱 中 的 【和 炬 形 工具 】 = TFI =rhiS DB36] SErk7JESG, (R: 255, G: 174, B: 0) ，【 摘 边 】 更 
改 为 无 ， 在 云 扩 图形 位 置 绘制 一 个 和 矩形， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 3.129 所 示 。 


图 3.129 ”绘制 矩形 


在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【矩形 1 拷贝 】 
图 层 ， 如 图 3.130 所 示 。 


选中 【矩形 1 拷贝 】 图 层 ， 将 图 形 【 填 充 】 更 改 为 监 色 (R: 0, G: 178, B: 255) ， 按 Ctrl+T 组 合 键 对 其 执行 
【 目 由 变换 】 命 令 ， 将 图 形 高 度 缩 小 ， 完 成 之 后 按 Enter 刍 确认， 如 图 3.131 所 示 。 


图 3.130 复制 图 层 


图 3.131 ”缩小 图 形 


选择 工具 箱 中 的 【和 矩形 工具 】 图 | ， 在 选项 栏 中 将 【填充 】 更 改 为 楼 色 (R: 255, G: 174，B: 0) ，【 摘 边 】 更 
改 为 无 ， 在 矩形 底部 按 住 Shift 键 绘制 一 个 算 形 ， 此 时 将 生成 一 个 【和 窍 形 2】 图 层 ， 如 图 3.132 所 示 。 


按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 人 命令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 。 


选择 工具 箱 中 的 【直接 选择 工具 】 Ñ: ， 选 中 矩形 顶部 锚 点 ， 将 其 删除 以 制作 箭头 ， 如 图 3.133 所 示 。 


图 3.132 ”绘制 矩形 


图 3.133 ”制作 箭头 


同时 选中 【和 窍 形 2】 及 【和 窍 形 1】 图 层 ， 按 Ctrl+E 组 合 键 将 图 层 合 并 ， 此 时 将 生成 一 个 【和 窍 形 2】 图 层 。 


在 【图 层 】 面 板 中 选中 【矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 冯 按钮， 在 菜单 中 选择 【渐变 晋 加 】 命 


少 


在 弹出 的 对 语 框 中 将 【混合 模式 】 更 改 为 【 柔 沧 】， 【不 透明 度 】 更 改 为 ?0%，【 渐 要】 更 改 为 黑色 到 日 色 ， 完 
成 之 后 单 击 【确定 】 按 钮 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 3.134 所 示 。 


图 3.134 ”最终 效果 


设计 构思 


本 例 讲解 制作 催眠 应 用 图 标 ， 此 款 图 标 采 用 超 简洁 的 设计 手法 ， 通 过 简单 的 图 形 组 合 制作 出 美妙 的 夜晚 星空 效果 ， 传 递 给 浏 
览 者 一 种 舒适 的 视觉 及 心理 体验 ， 最 终 效果 如 图 3.135 所 示 。 


. 难 易 指 数 : kk Yc Yc 
. 案例 位 置 : 源 文件 \ 第 3 章 \ 众 眠 应 用 图 标 .psd 


视频 位 置 : 视频 教学 \3.11 众 有 眠 应 用 图 标 .avi 


图 3.133 最终 效果 


重点 分 解 
图 标 元 素 
色彩 分 析 


主体 色 为 冷 艳 紫色 ， 以 黄色 为 点 级 色 ， 主 色调 突出 了 图 标的 特征 ， 同 时 以 天 空 元 素 对 图 标 进行 点 级 。 


| 
紫色 (R:63,G:188,B:232) 浅黄 色 (R:255,G:236,B:185) 


3.11.1 绘制 图 标 轮 万 


绘制 主 轮廓 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 碳 寸 ， 新 建 一 个 空白 画布 ， 将 画布 填充 为 淡 监 色 (R: 224, G: 230, B: 255) 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 量 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 画布 靠 左 侧 位 置 按 
住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.136 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 】 
图 层 ， 如 图 3.137 所 示 。 


步骤 04 ”在 【图 层 】 面 板 中 选中 【椭圆 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 巷 按 钮 ， 在 荣 单 中 选择 【渐变 赫 


加 】 命 令 。 


图 3.136 ”绘制 图 形 


图 3.137 复制 图 技 


步骤 05? ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 135, G: 167, B: 245) 到 紫色 (R: 85, G: 69, B: 133), 
完成 之 后 单 击 【确定 】 按 钮 ， 如 图 3.138 所 示 。 


步骤 06 ”选中 【椭圆 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 3.139 所 示 。 


图 3.138 ¿juj E Š ja 


图 3.139 ”变换 图 形 


3.11.2 ”绘制 委 饰 元 素 


步骤 01 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 [kE T Es] 路 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 紫色 (R: 98, G: 78, B: 163) ，【 描 边 】 更 改 为 无 


步骤 02 ”绘制 一 个 不 规则 图 形 ， 此 时 将 生成 一 个 【形状 1】 图 层 ， 如 图 3.140 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轿 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 ， 如 图 3.141 所 示 。 


图 3.140 ”绘制 图 形 


图 3.141 复制 图 层 


步骤 04 ”选中 【形状 1】 图 层 ， 将 图 层 【 不 透明 度 】 更 改 为 40%， 再 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 
右键 ， 从 弹出 的 快捷 荣 单 中 选择 【水 平 垂直 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.142 所 示 。 


步骤 05 在 【 李 圆 1 拷贝 】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 格 化 图 层 样 式 】 命 令 。 


步骤 06 ”同时 选中 【形状 1 拷贝 】 及 【形状 1】 图 层 ， 执 行 菜单 杜 中 的 【图 层 】| 【创建 草 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪 
贴 蒙 版 ， 隐 藏 正 圆 以 外 的 图 形 ， 如 图 3.143 所 示 。 


图 3.142 ”变换 图 形 


图 3.143 ”创建 剪贴 蒙 版 


步骤 07 ”同时 选中 【形状 1 拷贝 】 及 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 sar, 复制 两 个 拷贝 图 层 。 


步骤 08 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【垂直 翻转 】 命 令 ， 完 
之 后 按 Enter 键 确认 ， 再 将 图 层 【 不 透明 度 】 更 改 为 20%， 如 图 3.144 所 示 。 


图 3.144 ”变换 图 形 


步骤 09 ”选择 工具 箱 中 的 【直线 工具 】 之 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 1 像 
素 ， 在 图 标 靠 上 方位 置 绘制 一 条 倾斜 线 段 ， 将 生成 一 个 【形状 2】 图 层 ， 如 图 3.145 所 示 。 


图 3.145 ”绘制 线段 


步骤 10 ”在 【图 层 】 面 板 中 选中 【形状 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 


3.146 所 示 。 


步骤 11 选择 工具 箱 中 的 【渐变 工具 】 央 |， 编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 周 按钮 ， 在 线段 上 拖 
动 ， 将 部 分 图 形 隐 藏 ， 如 图 3.147 所 示 。 


:加 中 国 


图 3.146 ”添加 图 层 蒙 版 


图 3.147 ”隐藏 图 形 


步骤 12 选中 【形状 2】 图 层 ， 在 画布 中 按 住 Alt 键 拖 动 ， 将 线段 复制 两 份 ， 生 成 【形状 2 拷贝 】 及 【形状 2 拷贝 2】 图 层 ， 如 
图 3.148 所 示 。 


步骤 13 同时 选中 【形状 2 拷贝 2】、【 形 状 2 搁 贝 】 及 【形状 2】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 堵 加 】， 效 果 如 图 3.149 
所 示 。 


图 3.148 复制 图 形 


图 3.149 ”设置 图 层 混合 模式 


步 又 14 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 Sl 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【区 
加 】， 如 图 3.150 所 示 ， 


步骤 15 ”选择 工具 箱 中 的 【画笔 工具 】 1 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 1 像素 ，【 硬 度 】 更 改 为 0%， 如 图 3.151 所 示 。 


图 3.150 “新 建 图 层 


图 3.151 设置 笔触 


步骤 16 将 前 景色 更 改 为 晶 色 ， 在 适当 的 位 置 单 击 添加 图 像 ， 如 图 3.152 所 示 。 


步骤 17， 选择 工具 箱 中 的 【椭圆 工具 】 碟 》 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅黄 色 (R: 255, G: 236, B: 185) ，【 描 
边 】 更 改 为 无 ， 在 适当 的 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.153 所 示 。 


图 3.152 ”添加 图 像 


图 3.153 ”绘制 图 形 


步骤 18 在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fjssn, 在 菜单 中 选择 【外 友 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 改 为 日 色 ，【 大 小 】 更 改 为 20 
像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 3.154 所 示 。 


步骤 19 ”选中 【椭圆 2】 图 层 ， 在 画布 中 按 住 Alt 键 向 下 拖 动 ， 将 图 形 复制 一 份 ， 生 成 一 个 【椭圆 2 拷贝 】 图 层 ， 适 当 缩 小 图 
形 高 度 ， 删 除 【 外 友 光 】 效 果 ， 如 图 3.155 所 示 。 


图 3.154 ”设置 【外 发 光 】〗 参数 


步骤 20 ”选中 【椭圆 2 拷贝 】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 柔 光 】， 这 样 区 完成 了 效果 的 制作 ， 如 图 3.156 所 示 。 


图 3.155 复制 图 形 


图 3.156 ”最 终 效 果 


3.12 ”地 图 应 用 图 标 


设计 构思 


本 例 讲 解 制作 地 图 应 用 图 标 ， 该 图 标 以 绿色 正 圆 图 形 为 主 轮廓， 通过 绘制 不 规则 图 形制 作出 地 图 图 形 ， 具 有 很 强 的 可 识别 
性 ， 最 终 效 果 如 图 3.157 所 示 。 


` 难 易 指 数 : kk Ycyc Yc 
` 案例 位 置 : 源 文件 \ 第 3 章 \ 地 图 应 用 图 标 .psd 


视频 位 置 : 视频 教学 \3.12 地 图 应 用 图 标 .avi 


图 3.137 绿 父 效 采 


重点 分 解 
轮 廊 地 图 标记 
色彩 分 析 


以 自然 浅 绿色 与 蓝 色 搭配 ， 以 醒目 的 橙色 标识 突出 图 标的 特征 。 


KG Co eëëelele..O aa  LrrprQ r iw 
浅 绿 色 (R:216,G:248,B:236) — 蓝 色 (R:216,G:248,B:236) 橙色 (R:228,G:58,B:19) 


3.12.1 绘制 主 轮 局 


ZZ l| 2 EU 


制作 地 


+ kt Ba 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 320 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 斗 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 70, G: 217, B: 164) ，【 描 边 】 
更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.158 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 绿色 (R: 216, G: 248, B: 236) , DE 
边 】 更 改 为 无 ， 在 正 圆 中 间 位 置 绘制 一 个 算 形 ， 此 时 将 生成 一 个 【和 窍 形 1】 图 层 ， 如 图 3.159 所 示 。 


图 3.158 25] E [J 


图 3.159 ”绘制 矩形 


步骤 04 ”选中 【 算 形 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ,从 弹出 的 快捷 菜 蛙 中 选择 【 透 
视 】 命 令 ， 拖 动 变形 框 控 制 点 变换 图 形 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 3.160 所 示 。 


步骤 05 ”选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 路 径 操作 】 四 按钮 ， 在 弹出 的 选项 中 选择 【 减 去 顶层 形 
状 】 选 项 ， 在 图 形 底 部 绘制 不 规则 形状 ， 将 部 分 图 形 减 去 ， 如 图 3.161 所 示 。 


83.16042 


图 3.161 减 去 图 形 


步骤 06 ”选中 【矩形 1】,， 在 属性 栏 中 将 【 摘 边 】 更 改 为 日 色 ，【 宽 度 】 更 改 为 3 点 ， 如 图 3.162 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【钢笔 工具 】 公 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路径 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 形 左 侧 位 置 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 
3.163 所 示 。 


图 3.162 添加 描 边 


图 3.103 ”绘制 图 形 


步骤 08 选中 【形状 1】 图 层 ， 执 行 菜 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 合 令 ， 为 当 责 图 层 创 建 筋 贴 蒙 唉 ， 隐 藏 部 分 图 
形 ， 并 将 其 图 层 混 合 模式 更 改 为 【和 柔 光 】， 如 图 3.164 所 示 。 


图 3.164 创建 前 贴 蒙 版 


步骤 09 ”选择 工具 箱 中 的 【钢笔 工具 】 戌 以 刚才 同样 的 方法 绘制 一 个 黑色 图 形 ， 并 为 其 设置 图 层 混合 模式 ， 如 图 3.165 
s 


步骤 10 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ,绘制 一 个 蓝 色 (R: 216, G: 248, B: 236) 图 形 ， 并 为 图 形 所 在 图 层 创 建 前 
贴 蒙 版 ， 如 图 3.166 所 示 . 


图 3.165 ”绘制 图 形 


图 3.166 ”绘制 图 形 


全 


步 又 11 在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 单 击 面 板 底部 的 【添加 图 层 样 式 】 hr 按钮 ， 在 菜单 中 选择 【投影 】 命 


Z J; 


42 


步骤 12 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 不 透明 度 】 更 改 为 10%，【 距 离 】 更 改 为 4 像素 ， 完 成 乙 后 
单 击 【 确 定 】 按 钮 ， 如 图 3.167 所 示 。 


不当 明度 (Ok —F a= 
角度 (让 [0 “ 度 癌 合用 全 局 光 (6) 
me —— 4 |= 
扩展 (由 )P=— % 
Jus; —aÀ, =>aəÁé)s= | 让 


品质 


等 名 续 : £ [ ] 3588825 (L) 


LW 图 层 挖 空投 影 (U) 
如 全 为 点 让 值 


图 3.167 设置 【投影 】 参 数 


3.12.2 ”制作 标记 图 标 


制作 标记 图 形 


标记 图 形 


步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 量 ， 在 选项 栏 中 将 【填充 】 更 改 为 楼 色 (R: 228, G: 58, B: 19) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.168 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【钢笔 工具 】 > ， 在 选项 栏 中 单 击 【 路 径 操 作 】 图 按钮 ， 在 弹出 的 选项 中 选择 【合并 形状 】， 
在 正 圆 底部 绘制 一 个 图 形 ， 如 图 3.169 所 示 。 


图 3.168 ”绘制 正 圆 


图 3.169 ”绘制 图 形 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 鲁 ， 按 住 Alt 键 绘制 一 个 正 圆 路 径 ， 将 部 分 图 形 减 去 ， 这 样 就 完成 了 效果 的 制作 ， 如 
图 3.170 所 示 。 


图 3.170 ”最 终 效 果 


3.13 


设计 构思 


本 例 讲解 制作 扁平 化 相机 图 标 ， 此 款 图 标的 特点 是 具有 素雅 的 外 观 ， 在 色彩 及 轮廓 的 制作 过 程 中 追求 简洁 、 和 舒适 ， 最 终 效 果 
如 图 3.171 所 示 。 


. 难 易 指数 : 真 砍 六 六 交 
案例 位 置 : 源 文件 \ 第 3 齐 \ 扁 平 化 相机 图 标 .psd 


' 视频 位 置 : 视频 教学 \3.13 遍 平 化 相机 图 标 .avi 


图 3.171 最 终 效 有 果 


重点 分 解 


轮廓 细节 元 素 镜头 


主体 色 为 蓝 色 及 深蓝 色调 ， 以 浅 红色 为 辅助 和 色 ， 整 体 和 色调 体现 出 较 强 的 科技 感 。 


LU 上 有 
蓝 色 (R:190,G:230,B:0) 浅 红 色 (R:235,G:240,B:242) 深蓝 色 (R:30,G:54,B:102) 


3.13.1 制作 主题 图 像 


绘制 [AJ 
绘 会 制 | JE l: z< KT * EJ 
I| TEJ 
饰 色 市 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空白 画布 ， 将 画布 填充 为 浅 监 色 (R: 178, G: 218, B: 250), 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 Ü) ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 


【半径 】 更 改 
为 25 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 3.172 所 示 。 


步骤 03 ”选择 工具 箱 中 的 【矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 92, G: 163, B: 225) , 
更 改 为 无 ， 绘 制 一 个 矩形 ， 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 3.173 所 示 。 


图 3.172 22] E] 6 EJ 


图 3.173 ”绘制 矩形 


步骤 04 选中 【和 矩形 1】 图 层 ， 执行 菜单 栏 中 的 【图 层 】|【 创 建部 贴 蒙 版 】 命 令 ， 为 当前 图 层 创 建部 贴 蒙 版 ， 隐 着 部 分 图 
像 ， 如 图 3.174 所 示 。 


步骤 05 ”选择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 红色 (R: 255, G: 120, B: 120) ，【 描 
边 】 更 改 为 无 ， 在 图 标 左上 角 位 置 按 住 shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 3.175 所 示 。 


图 3.174 创建 前 贴 蒙 版 


步骤 06 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 蓝 色 (R: 168, G: 210, B: 243) ， 
【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 像素， 在 图 标 石上 角 绘 制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 贺 角 算 形 2】 图 层 ， 如 图 3.176 
所 示 。 


图 3.175 22] E Fj 


图 3.176 22) B] # /E3 
步骤 07， 选 择 工具 箱 中 的 【矩形 工具 】 国 ， 在 圆 角 和 矩形 项 部 位 置 按 住 Alt 键 绘制 个 细 长 路 径 ， 将 部 分 图 形 减 去 . 


步 又 08 ”选择 工具 箱 中 的 【路 径 选 择 工具 】 鉴 ， 选 中 路 径 ， 将 路 径 向 下 复制 两 份 ， 如 图 3.177 所 示 . 


= 
" 
- 


图 3.177 减 去 图 形 


3.13.2 ”制作 镜头 图 像 


制作 镜头 


镜头 图 像 


步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 惫 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 30, G: 54, B: 102) ，【 描 边 】 
更 改 为 日 多，【 免 厌 】 更 改 为 10 点 ， 在 图 标 中 间 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 3.178 所 


小 \。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【椭圆 2 拷贝 】 


图 层 ， 如 图 3.179 所 示 。 


图 3.178 22] iE Bj 


图 3.179 复制 图 层 


步 又 03 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 冯 按钮， 在 菜单 中 选择 【投影 】 命 令 ， 
在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 30%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 3 像素 ， 
【大 小 】 更 改 为 7 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 3.180 所 示 。 
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图 3.180 设置 【投影 】 参 数 
步骤 04 将 【椭圆 2 拷贝 】 图 层 中 正 圆 【填充 】 更 改 为 无 ， 表 将 其 等 比 缩小 ， 如 图 3.181 所 示 。 


步骤 05 在 【图 层 】 面 板 中 选中 【椭圆 2 拷贝 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 按钮 ， 在 菜 蛙 中 选择 【 淘 变 置 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 系 渐变 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 3.182 所 示 。 


图 3.181 交换 图 形 


图 3.182 ”添加 渐变 
提示 与 技巧 


在 设置 潮 变 磊 色 时 ， 顾 色 值 并 非 固定 ， 可 根据 下 方 闫 色 自由 调整 。 


步骤 06 ”选择 工具 箱 中 的 【画笔 工具 】 "á ， 在 画布 中 单 击 鼠标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 
为 10 像 素 ，【 和 硬度】 更 改 为 0%， 如 图 3.183 所 示 。 


步骤 07 ”将 前 景色 更 改 为 日 色 ， 在 图 标 中 心 位 置 单 击 添加 高 光 ， 如 图 3.184 所 示 。 


图 3.183 ”设置 笔触 


适当 缩小 画笔 笔触 ， 在 
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图 3.184 添加 高 光 


光 旁 边 位 置 再 次 单 击 添加 高 光 效 果 ， 这 样 束 完 成 了 效果 的 制作 ， 如 图 3.185 所 示 。 


图 3.185 ”最终 效果 


第 4 章 ” 超 写实 图 标 设 计 
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本 章 介绍 


本 章 讲 解 超 写实 图 标 设 计 ， 写 实 可 以 直接 理解 为 还 原 真实 ， 它 意 在 如 实 描绘 事物 ， 或 者 照 物 体 进 行 写 实 描 绘 ， 并 且 做 到 与 对 


象 基 本 相符 的 目的 。 本 章 中 写实 元 素 主 要 以 日 常 实用 的 设计 元 素 为 主 ， 比 如 质感 麦克 风 图 标 、CD 播 放 图 标 、 音 箱 写 实 图 标 、 纽 
扣 写 实 图 标 、 购 物 图 标 、 质 感 笔记 图 标 及 质感 插座 图 标 等 。 通 过 对 本 章 内 容 的 学 习 可 以 掌握 超 写 实 图 标的 设计 。 
要 点 索引 


学 会 制作 超 质 感 麦克 风 图 标 


习 绘 制 CD 播 放 图 标 


学 会 制作 超 质感 播放 图 标 


一 | 


解 首 箱 写 实 图 标 制作 流程 


学 会 制作 购物 图 标 


. 掌握 质感 笔记 图 标 绘制 


41 超 质感 麦克风 图 标 


设计 构思 
本 例 讲解 制作 超 质 感 麦 克 风 图 标 ， 此 款 麦 克 图 标 具 有 超 强 的 质感 ， 很 好 的 可 识别 性 与 极 佳 的 拟 物 化 形象 ， 使 这 款 图 标的 最 终 
效果 相当 出 色 ， 最 终 效 果 如 图 4.1 所 示 。 
: Kkycx< yx 


素材 位 置 : 调用 素材 \ 第 4 章 \ 超 质感 麦克 风 图 标 
“ 案例 位 置 : 源 文件 \ 第 4 章 \ 超 质感 麦 充 风 图 标 .psd 
“ 视频 位 置 : 


视频 教学 \4.1 超 质感 麦克 风 图 标 .avi 
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图 4.1 最 终 效 果 


重点 分 解 


以 灰色 和 深 灰 色 作为 冷色 调 ， 以 浅 灰 色 为 辅助 色 ， 整 个 图 标 表现 出 超 强 的 质感 。 


w 3 5 5 5 ipp h l s D 
灰色 (R:122,G:126,B:129) 深 灰 色 (R:46 G:46.B:46) 


4.1.1 ”制作 图 标 轮 局 


制作 主体 图 像 
处 理 质 感 麦 克 


轮 慷 效果 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 400 像 素 ，【 
辩 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 画布 ， 将 辆 布 填充 为 蓝 色 (R: 37, G: 70, B: 90) 到 深蓝 色 (R: 12, G: 26, B: 
38) 的 径 向 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
20 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 4.2 所 示 。 


图 4.2 ”绘制 圆 角 和 矩形 


步 又 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 配 按钮 ， 在 菜单 中 选择 【渐变 赤 


加 】 命 令 。 


步骤 04 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 系 渐 变 ， 如 图 4.3 所 示 。 
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图 4.3 Jx [m e eja] 参数 
提示 与 技巧 


此 处 的 渐变 颜色 可 参照 下 图 中 进行 设置 ， 只 需要 达到 金属 过 渡 质 感 效果 即 可 。 
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步骤 05 ”选中 【内 阴影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 正 单 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 10096， 
【距离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.4 所 示 。 
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图 4.4 设置 【内 阴影 】 参 数 


步骤 06 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 率 材 \ 第 4 章 \ 超 质感 专 克 风 图 标 \ 话 简 .psd、 网 状 育 
景 .psd” 文 件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 并 适当 缩小 ， 如 图 4.? 所 示 。 
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图 4.5 ”添加 素材 
步骤 07 在 【图 层 】 面 板 中 选中 【 话 简 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样式 】 kx 按钮 ， 在 菜单 中 选择 【投影 】 命 令 。 


步骤 08 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 80%，【 距 离 】 


更 改 为 2 像素 ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.6 所 示 。 
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4.1.2 “处理 真实 阴影 
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阴影 效 琳 


阴影 效果 


步骤 01 选择 工具 箱 中 的 【椭圆 工具 】 惫 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 标底 部 绘制 一 个 
椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.7 所 示 。 


图 4.7 ”绘制 李 


步骤 02 执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 


话 框 中 将 【半径 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.8 所 示 。 


步骤 03 ”执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 
100 像 素 ， 设 置 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 残 完成 了 效果 的 制作 ， 如 图 4.9 所 示 。 
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图 4.8 添加 高 斯 模糊 
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图 4.9 ”了 最终 效果 


42 ”CD 播放 图 标 


设计 构思 


本 例 讲解 制作 CD 播放 图 标 ， 该 图 标 在 制作 过 程 中 利用 图 层 样 式 制作 出 真实 的 唱片 图 像 ， 整 体 效果 相当 出 色 ， 最 终 效 果 如 图 
4.10 所 示 。 


` 难 易 指数 : kk k x< 
. 案例 位 置 : 源 文件 \ 第 4 章 \CD 播 放 图 标 .psd 


视频 位 置 : 视频 教学 \4.2CD 播 放 图 标 .avi 


图 4.10 ”最 终 效 果 


主 色 调 为 激情 红 ， 以 光 副 彩色 及 灰色 卡 扣 作为 金属 辅助 色 ， 将 真实 的 CD 唱片 表现 的 十 分 完美 。 


| 
红色 (R:7,G:141,B:188) 灰色 (R:216,G:0,B:38) 


4.2.1 绘制 图 标 主 轮 局 


制作 主体 图 像 
制作 质感 效 来 


+ kt Bs 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
辨 率 】 为 72 像 素 /英寸 ， 新 建 一 个 空白 画布 ， 将 画布 填充 为 灰色 (R: 176, G: 183, B: 192) 到 深 灰 色 (R: 107, G: 
117, B: 130) 的 径 向 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
40 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 4.11 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【质感 】、【 轮 廓 】 及 【阴影 】， 如 图 4.12 所 示 。 


图 4.11 绘制 图 形 


图 4.12 复制 图 层 


步骤 04 ”选中 【质感 】 图 层 ， 执 行 菜 单 栏 中 的 【 渡 镜 】|【 杂 色 】| 【添加 杂 色 】 命 令 ， 在 弹出 的 对 话 框 中 分 别 选中 【高 斯 分 
布 】 单 选 按钮 及 【 单 色 】 复 选 框 ,将 【数量 】 更 改 为 1%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.13 所 示 。 
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图 4.13 ”设置 【添加 杂 色 】 参数 及 效果 


屋 混 合 模式 设置 为 【正片 到 底 】， 如 图 4.14 所 示 。 
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图 4.14 设置 图 层 混 合 模式 


步骤 06 在 【图 层 】 面 板 中 选中 【轮廓 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 f 按钮 ， 在 菜单 中 选择 【和 斜面 和 浮雕 】 
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步骤 07 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【和 角度】 更 改 为 90 度 ，【 高 光 模 式 】 
中 的 【不 透明 度 】 更 改 为 70%，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 30%， 如 图 4.15 所 示 。 
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图 4.15 ”设置 【斜面 和 浮雕 〗 参 数 


242, B: 242) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.16 所 示 。 


取消 


新 建 样 或 tw)… | 
[V 预览 (V) 


选中 【渐变 看 加 】 复 选 框 ， 将 【渐变 】 更 改 为 灰色 (R: 194, G: 194, B: 194) 到 灰色 (R: 242, G 


其 这 登 加 
混合 模式 ; | Es nimi. 
不 遂 明 度 (P === 100 x 新 建 样 武 (W)..， | I 
Wa: ds || [FO (J 预览 (v) 
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| 设置 光 认 值 | | 室 位 为 默认 值 | 


图 4.16 jk 32 [ər F £ pa] 参数 


步骤 09 ”选择 工具 箱 中 的 【椭圆 工具 】 @ , ZrukmrhiS DEzZs] sp2292T65 (R: 210, G: 63, B: 63) ，【 描 边 】 更 
改 为 无 ， 在 图 标 中 间 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.17 所 示 。 


步骤 10 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 三 个 拷贝 图 层 ， 分 别 
将 图 层 名 称 更 改 为 【 卡 扣 】、【 光 盘 孔 】、【 光 盘 】 及 【四 横 】， 如 图 4.18 所 示 。 


图 4.17 


绘制 正 


图 4.18 复制 图 层 


步骤 11 选中 【 凹 槽 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 意 按钮 ， 在 菜单 中 选择 【 描 边 】 命 令 ， 在 弹出 的 对 话 框 中 
将 【大 小 】 更 改 为 2 像素 ，【 位 置 】 更 改 为 【内 部 】，【 填 充 类 型 】 更 改 为 【渐变 】，【 渐 变 】 更 改 为 灰色 (R: 229, G: 
229, B: 229) 到 黄色 (R: 152, G: 152, B: 152) ， 如 图 4.19 所 示 。 


图 4.19 ”设置 【 描 边 】 参 数 


步骤 12 ”选中 【内 友 光 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 50%，【 颜 色 】 更 改 为 黑色 ， 
【大 小 】 更 改 为 10 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.20 所 示 。 


图 4.20 设置 【内 发 光 】 参 数 


步骤 13 ”选中 【光盘 】 图 层 , 将 其 【填充 】 更 改 为 黑色 并 等 比 缩 小 ， 如 图 4.21 所 示 。 


图 4.21 交换 图 形 


在 【图 层 】 面板 中 选中 【光盘 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 交 按 钮 ， 在 菜单 中 选择 【渐变 看 加 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 彩色 系 潮 变 ，【 样 式 】 更 改 为 【角度 】， 如 图 4.22 所 示 。 
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图 4.22 ”设置 【 渐 交 过 加 】 参 数 
提示 与 技巧 


在 设置 渐变 的 时 候 ， 需 要 注意 色 标 的 数量 及 顾 色 深浅 ， 可 以 真实 的 光盘 图 像 作 为 参考 对 色 标 数量 及 数值 进行 设置 。 
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步骤 12 ”选中 【内 阴影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【时 加 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 45%， 
【距离 】 更 改 为 1 像素 ，【 阻 塞 】 更 改 为 100%，【 大 小 】 更 改 为 1 像素 ， 如 图 4.23 所 示 。 
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图 4.23 ”设置 【内 发 光 】 参 数 


步骤 16 选中 【投影 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 60%，【 距 离 】 更 改 为 3 像素 ， 


击 【 确 定 】 按 钮 ， 如 图 4.24 所 示 。 
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【大 小 】 更 改 为 7 像素 ， 


图 4.24 设置 【投影 】 参 数 


42.2 处理 光盘 


制作 光盘 效 来 


光 副 效果 


步骤 01 选中 【光盘 】 图 层 ， 单 击 面板 底部 的 【创建 新 图 层 】 SI 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 将 其 填充 为 灰色 (R: 
148, G: 148, B: 148) 。 


步骤 02 ”执行 荣 单 栏 中 的 【 滤 镑 】|【 杂 色 】|【 添 加 杂 色 】 命 令 ， 在 弹出 的 对 话 框 中 将 【数量 】 更 改 为 100%， 分 别 选 中 
【平均 分 布 】 单 选 按钮 及 【音色 】 复 选 框 ， 完 成 乙 后 单 击 【确定 】 按 钮 ， 如 图 4.25 所 示 。 
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图 4.25 ”设置 【添加 杂 色 】〗 参数 及 效果 
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钮 ， 将 【数量 】 更 改 为 100， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.26 所 示 。 
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图 4.26 ”设置 【 径 向 模糊 参数 及 效果 


步骤 04， 按 Ctrl+ F 组 合 键 重复 为 其 添加 模糊 效果 ， 如 图 4.27 所 示 。 


图 4.27 重复 添加 模糊 效果 


步骤 05 ”执行 荣 单 栏 中 的 【 滤 镜 】|【 铝 化 】|【 铝 化 】 命 令 ， 锅 化 图 像 ， 如 图 4.28 所 示 。 


步骤 06 按 Ctrl+F 组 合 键 重复 为 其 添加 锐 化 效果 ， 如 图 4.29 所 示 。 


图 4.28 ” 锐 化 图 像 


图 4.29 ”重复 添加 锐 化 效果 


步骤 07” 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.30 所 示 。 


图 4.30 ”缩小 图 像 


步骤 08 在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 图 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
4.31 所 示 。 


步骤 09 ” 按 住 Ctrl 键 单 击 【光盘 】 图 层 缩 移 图 ， 将 其 载 入 选区 ， 执 行 菜 单 栏 中 的 【选择 】|【 反 向 】 命 令 ， 将 选区 反 向 ,将 
选区 填充 为 黑色 ,隐藏 部 分 图 像 ， 完 成 之 后 按 Ctrl+ DD 组合 键 取消 选区 ， 如 图 4.32 所 示 。 


图 4.31 添加 图 层 蒙 版 


图 4.32 [Š à E 4 


步骤 10 ”将 【图 层 1】 图 层 混合 模式 设置 为 【 强 光 】， 效 果 如 图 4.33 所 示 。 


图 4.33 ”设置 图 层 混 合 模式 


4.2.3 ”绘制 光盘 卡 扣 


制作 卡 扣 
#ë EE 


步骤 01 选中 【光盘 了 筷 】 图 层 , 将 【填充 】 更 改 为 灰色 (R: 229, G: 229, B: 229) ， 再 按 Ctrl+T 组 合 键 对 其 执行 【 目 
变换 】 命 令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.34 所 示 。 


图 4.34 ”缩小 图 形 


步骤 02 在 【图 层 】 面 板 中 选中 【光盘 孔 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 六 按钮， 在 菜单 中 选择 【外 发 光 】 命 


令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 40%，【 颜 色 】 更 改 为 黑色 ，【 大 小 】 更 改 为 2 像 
素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.35 所 示 。 
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图 4.35 设置 【外 发 光 】 参 数 


步骤 03 选中 【 卡 扣 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 
图 4.36 所 示 。 


图 4.36 ”缩小 图 形 
步骤 04 在 【图 层 】 面 板 中 选中 【 卡 扣 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 六 按钮 在 菜单 中 选择 【和 斜面 和 浮雕 】 


步骤 05 “在 弹出 的 对 话 框 中 将 【样式 】 更 改 为 【内 斜面 】，【 方 法 】 更 改 为 【雕刻 清晰 】，【 大 小 】 更 改 为 0 像素 ， 取 消 
【使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 -90 度 ，【 光 泽 等 高 线 】 更 改 为 环形 ，【 高 光 模式 】 中 的 【不 透明 度 】 更 改 为 709， 


【阴影 模式 】 中 的 【不 透明 度 】 更 改 为 60%， 如 图 4.37 所 示 。 
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图 4.37 设置 【斜面 和 浮雕 〗 参 数 


步骤 06 ”选中 【渐变 蔷 加 】 复 选 框 ,将 【渐变 】 更 改 为 灰色 (R: 34, G: 34, B: 34) 到 灰色 (R: 85, G: 85, B: 


85) ， 如 图 4.38 所 示 。 


图 4.38 JEE [#r 3 5 ja] 参数 


步骤 07 选中 【投影 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 70%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 如 图 4.39 所 示 。 
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图 4.39 设置 【投影 】 参 数 


步骤 08 在 【图 层 】 面 板 中 选中 【 卡 扣 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按 钮 上 ， 复 制 一 个 【 卡 扣 拷 贝 】 图 


步骤 09 选中 【 卡 扣 拷 贝 】 图 层 ， 


如 图 4.40 所 示 。 


按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确 


图 4.40 ”缩小 图 形 


步骤 10 ”在 【图 层 】 面 板 中 选中 【 卡 扣 拷 贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按钮 ， 在 菜单 中 选择 【内 阴影 】 


人 人 
RD Zo 


步骤 11 ”在 弹出 的 对 话 框 中 将 【颜色 】 更 改 为 红色 (R: 189, G: 57, B: 57) ，【 不 透明 度 】 更 改 为 100%， 取 消 【 使 用 
全 局 光 】 复 选 框 ; 将 【和 角度】 更 改 为 -90 度 ，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 如 图 4.41 所 示 。 


图 4.41 ZE [8 j 22] Zx 


步骤 12 ”选中 【渐变 到 加 】 复 选 框 ， 将 【渐变 】 更 改 为 白色 到 灰色 (R: 55, G: 55, B: 55) ，【 样 式 】 更 改 为 【 径 
向 】，【 缩 放 】 更 改 为 759， 如 图 4.42 所 示 。 


图 4.42 kE [št k eja] 参数 


步骤 13 ”选中 【投影 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 60%，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 如 图 4.43 所 示 。 
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图 4.43 ”设置 【投影 】 参 数 
步骤 14 选中 【阴影 】 图 层 , 将 【填充 】 更 改 为 灰色 (R: 39, G: 39, B: 39) 。 
步骤 15 执行 菜单 栏 中 的 【 渡 镜 】| 【模糊 】| 【动感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 转 换 为 智能 对 象 】 按 钮 ， 然 后 在 
弹出 的 对 话 框 中 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 50 像 素 ， 设 置 完成 乙 后 单 击 【确定 】 按 钮 ， 效 果 如 图 4.44 上 所 示 。 
步骤 16 执行 菜单 栏 中 的 【 渡 镜 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 5 像素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 效 果 如 图 4.45 所 示 。 


图 4.44 添加 动感 模糊 


图 4.45 ”添加 高 斯 模糊 


步骤 17 在 【图 层 】 面 板 中 选中 【阴影 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 4.46 
所 示 。 


步骤 18 ”选择 工具 箱 中 的 【画笔 工具 】 <《， 在 画布 中 单 击 和 鼠标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 100 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 4.47 所 示 。 


= e T H m : 


图 4.46 ”添加 图 层 蒙 版 


图 4.47 设置 笔触 


步骤 19 ”将 前 景色 更 改 为 黑色 ， 人 在 其 图 像 部 分 区 域 涂抹 将 其 隐藏 ， 这 样 束 完成 了 的 效果 制作 ， 如 图 4.48 所 示 。 


图 4.48 ”最 终 效果 


43 ”起 质感 播放 图 标 


设计 构思 


本 例 讲解 制作 超 质 感 播放 图 标 ， 此 款 图 标 具 有 十 分 真实 的 质感 ， 通 过 对 图 层 样式 的 灵活 运用 ， 使 按钮 的 观赏 性 及 实用 性 大 大 
最 终 效 果 如 图 4.49 所 示 。 
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. 难 易 指数 : kk k Yc < 
案例 位 置 : 源 文件 \ 第 4 章 \ 超 质感 播放 图 标 .psd 


` 视频 位 置 : 视频 教学 \4.3 超 质感 播放 图 标 .avi 


图 4.49 “最终 效果 


发 光标 识 


将 灰色 作为 亲 肤 材质 色调 ， 以 蓝 色 作 为 科技 辅助 色 ， 整 体 表现 出 出 色 的 按键 质感 。 


灰色 (R:160,G:153,B:137) 蓝 色 (R:0,G:164,B:240) 


4.3.1 绘制 按钮 轮 局 


rh) E Fl 


制作 质感 


按钮 轮廓 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 300 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 放 72 像 素 /英寸 ， 新 建 一 个 空 日 画布 ， 将 画布 填 苑 为 灰色 (R: 211, G: 207, B: 196) 。 


步骤 02 单 击 【图 层 】 面 板 底部 的 【创建 新 图 形 】 黑 按钮 ， 新 建 一 个 【图 层 1】 图 层 并 填充 为 白色 。 执 行 菜单 栏 中 的 【 渡 
镜 】 | 【 杂 色 】 | 【添加 杂 色 】 命令 ， 在 弹出 的 对 话 框 中 将 【数量 】 更 改 为 2%， 分 别 选中 【高 斯 分 布 】 单 选 按钮 及 【 单 色 】 £ 
选 框 ， 完 成 之 后 单 击 【确定 】 按 钮 . 


步 又 03 ”在 【图 层 】 面 板 中 ， 将 【图 层 1】 图 层 混合 模式 更 改 为 【正片 亚 底 】， 单 击 面板 底部 的 【添加 图 层 蒙 版 ] 贺 按 
钮 ， 选 择 工具 箱 中 的 【渐变 工具 】 国 ] ， 编 辑 黑 色 到 白色 的 径 向 渐变 ， 在 图 像 上 拖 动 ， 将 部 分 杂 色 图 像 隐藏 


步骤 04 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 矩形， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 层 ， 如 图 4.50 所 示 。 


步 又 05 在 【图 层 】 面 板 中 选中 【 圆 角 窍 形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Seat, £hl|— [IBI£83E 
形 1 拷贝 】 图 层 。 


步骤 06 选中 【 圆 角 起 形 1】 图 层 ， 将 图 形 【 盾 苑 】 更 改 为 深 黄 色 (R: 70, G: 64, B: 56) ; 再 选中 【 贺 角 起 形 1】 图 
层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换】 命令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.51 所 示 。 


图 4.50 ”绘制 图 形 


图 4.51 ”变换 图 形 


步骤 07 ”在 图 形 中 间 位 置 ， 创 建 水 平和 夷 和 直 两 条 交叉 参考 线 ， 并 使 交叉 点 置 于 图 形 中 间 位 置 ， 如 图 4.52 所 示 。 


图 4.52 ”创建 参考 线 


步 又 08 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】. 路 径 = 按钮， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 黄色 (R: 228, G: 224, B: 213) ，【 描 边 】 更 改 为 无 


步骤 09 在 圆 角 算 形 项 部 位 置 绘 制 一 个 不 规则 图 形 ， 此 时 将 生成 一 个 【形状 1】 图 层 ， 如 图 4.53 所 示 。 


步骤 10 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 sln t, 复制 三 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【 右 】、【 左 】、【 下 】 及 【上 】， 如 图 4.54 所 示 。 


图 4.53 ”绘制 图 形 


图 4.54 复制 图 层 


提示 与 技巧 


在 编辑 下 方 图 层 对 象 时 ， 可 将 上 方 所 有 对 象 隐藏 ， 这 样 更 方便 观察 实际 的 编辑 效果 。 在 不 需要 参考 线 时 ， 也 可 将 其 隐藏 。 


步骤 11 选中 【上 j】 图 层 ， 执 行 菜 单 栏 中 的 【 滤 错 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 
钮 ， 然 后 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.55 所 示 。 


步骤 12 选中 【下 】 图 层 ,将 其 【 填 序 】 更 改 为 灰色 (R: 160, G: 153, B: 142) ; 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变 
损 】 合 令 ， 单 击 电 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【和 替 直 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 并 将 图 形 同 下 移动 ， 如 图 
4.56 所 示 。 


图 4.55 ”设置 高 斯 模糊 


图 4.56 ”变换 图 形 


步骤 13 按 Ctrl+F 组 合 键 为 其 添加 高 斯 模糊 效果 ， 如 图 4.57 所 示 。 


步骤 14 选中 【元 】 图 层 ， 将 其 【 填 元 】 更 改 为 灰色 (R: 200, G: 195, B: 184) ; 按 Ctrl+T 组 合 键 执行 【 目 由 变换 】 
命令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 逆 时 针 旋 转 90 度 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 并 将 其 适当 移动 ， 如 图 
4.58 所 示 。 


图 4.57 “添加 高 斯 模糊 


图 4.58 ”变换 图 形 


步骤 12 按 Ctrl+F 组 合 键 为 其 添加 高 斯 模糊 效果 。 


步骤 16 选中 【 石 】 图 层 ， 以 同样 的 方法 将 其 顺 时 针 旋转 ， 并 更 改 【 填 元 】 为 灰色 (R: 200, G: 195, B: 184) ， 最 后 
为 其 添加 高 斯 模糊 效果 ， 如 图 4.59 所 示 。 


图 4.59 “添加 高 斯 模糊 


步骤 17 ”同时 选中 【 石 】、【 均 】、【 下 】 及 【上 上】 图 层 ， 执 行 荣 单 栏 中 的 【图 层 】|【 创 建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 
创建 筋 贴 蒙 版 ， 隐 藏 部 分 图 像 ， 如 图 4.60 所 示 。 


图 4.60 ”创建 剪贴 蒙 版 


步骤 18 在 【图 层 】 面 板 中 选中 【 圆 角 起 形 1】 图 层 ， 单 击 面板 辰 部 的 【添加 图 层 样式】 cp, 在 菜单 中 选择 【投影 】 命 


AS 
Xo 


步骤 19 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 寺 加 】， 【颜色 】 更 改 为 日 色 ，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 更 改 
为 1 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.61 所 示 。 


FE (A): - 30 K: | 使 用 全 局 光 (G) 
志 小 (): = [1 | 中 


s=a A 站 3899888 (t) 
杂 色 (N): —<=— j |% 
[Mi EE: (u) 
| 设置 为 对 认 值 | | 村 位 为 黑 认 信 | 


一 ÉN 


图 4.61 设置 【投影 】 参 数 


4.3.2 ”制作 触摸 面 图形 


rh ER [Bl 


触摸 面 


步骤 01 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 任意 颜色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 
改 为 45 像 素 ， 在 中 间 位 置 按 住 Shift 键 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 2】 图 层 ， 如 图 4.62 所 示 。 


图 4.62 ”绘制 图 形 


步骤 02 在 【图 层 】 面 板 中 选中 【 圆 角 起 形 2】 图 层 ， 单 击 面板 辰 部 的 【添加 图 层 样式 】 Bz, 在 菜单 中 选择 【渐变 蔷 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 220, G: 216, B: 210) 到 灰色 (R: 160, G: 153, B: 137), 
【缩放 】 更 改 为 150%， 如 图 4.63 所 示 。 


图 4.63 JEE [#r 3 5 ja] 参数 


步骤 03 ”选中 【投影 】 复 选 框 , 1# [be itasrk] SErX7J [Ë@JH] , 【颜色 】 更 改 为 日 多 ，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 
更 改 为 1 像素 ， 完 成 乙 后 单 击 【 和 确定】 按钮， 如 图 4.64 所 示 。 


不 二 明度 (0k — i |% 
EO ( 1) [0 ”| 度 口 使 用 全 局 光 (6) 
扩 民 (RY —===——— h | og 
rl E: w—— E | 


[V 图 层 接 空 鬼 影 (U) 


[| WE (8 | | SlombA | 


图 4.64 设置 【投影 】 参 数 


步骤 04， 选 择 工 具 箱 中 的 【矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 措 边 】 更 改 为 无 ， 在 图 标 中 间 绘制 一 个 
矩形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 4.65 所 示 。 


步骤 05 ” 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 。 


又 06 ”选择 工具 箱 中 的 【直接 选择 工具 】 心 ， 选 中 矩形 左 侧 锚 点 ， 将 其 删除 ， 如 图 4.66 所 示 。 


N u 


图 4.65 ”绘制 矩形 


图 4.66 “删除 描 点 


步骤 07 ”在 【图 层 】 面 板 中 选中 【和 窍 形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fen, 在 荣 单 中 选择 【和 斜面 和 浮雕] 


人 从 
HU o 


步骤 08 fr5ËrHBUXJusiErhiS [Eezu] SErXJ [DPI] , [AJ] SE2R2J1K5s, [Eay6tes=u] SErXJ [Ë@)l] , [4 
透明 度 】 更 改 为 100%，【 阴 有 影 模式 】 中 的 【不 透明 度 】 更 改 为 20%， 如 图 4.67 所 示 。 
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图 4.67 设置 【斜面 和 浮 膨 〗】 参 数 


步骤 09 


选中 【渐变 轰 加 】 复 选 框 ， 将 【渐变 】 更 改 为 青色 (R: 66, G: 230, B: 255) 到 蓝 色 (R: 0, G: 164, B: 
240) ， 【缩放 】 更 改 为 50%， 如 图 4.68 所 示 。 


浪 训 杆 式 :| 下 尝 | 口 居 
下 和 明 度 (Pk — |100 |% ”新 建 样式 (W)..。 | 
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样 坪 ; | 线 此 :| [4 SEJE243: (D 
了 
RE JE Jm [ER 
igk ——— [s |]% 


TL 8 | | 是 入 为 默 让 值 


图 4.68 JEE [ər 3 5 ja] 参数 


步骤 10 ”选中 【外 友 光 】 复 选 框 ,将 【 渴 合 模 式 】 更 改 为 【线性 光 】，【 不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 青色 
(R: 0, G: 192, B: 255) ，【 大 小 】 更 改 为 25 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 丈 完成 了 效果 的 制作 ， 如 图 4.69 所 


< 


图 4.69 最终 效 有 果 


44 音箱 写实 图 标 


加 
本 例 讲解 绘制 音箱 写实 国标， 该 音箱 图 标 十 分 精致 ， 以 侧 视 的 角度 进行 绘制 ， 突 显 立 体 效 果 的 同时 体现 出 更 丰富 的 细节 及 质 
感 ， 最 终 效果 如 图 4.70 所 示 。 


. 难 易 指数 : kk k Ya 
' 案例 位 置 : 源 文件 \ 第 4 章 \ 音 箱 写实 图 标 .psd 


. 视频 位 置 : 视频 教学 \4.4 音 箱 写 实 图 标 .avi 


图 4.70 ”最 终 效 果 


重点 分 解 


色彩 分 析 


主 色 调 为 暧 杰 色 ， 以 黄色 及 浅 灰 色 作 为 辅助 色 ， 整 体 色 调 与 音箱 特征 十 分 协调 。 


— j 
橙色 (R:31,G:153,B:216) 黄色 (R:248.G:211,B:114) 


4.4.1 ”绘制 音箱 轮廓 


制作 外 壳 


制作 喇 [ 以 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 为 72 像 素 / 严 十 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 灰色 (R: 240, G: 245, B: 250) 到 灰色 (R: 190, G: 200, B: 
206) 的 径 同 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 
个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.71 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 导 按钮 上 ， 复 制 一 个 拷贝 图 层 ， 分 别 
将 图 层 名 称 更 改 为 【外 过】 和 【阴影 】， 如 图 4.72 所 示 。 


图 4.71 绘制 正 圆 


图 4.72 复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【外 壳 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 巷 按 钮 ， 在 荣 单 中 选择 【渐变 于 加 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 楼 多 (R: 213, G: 114, B: 13) 到 黄色 (R: 248, G: 211, B: 114) ， 完 成 之 后 
单 击 【 确 定 】 按 钮 ， 如 图 4.73 所 示 . 


步骤 05 ”选中 【阴影 】 图 层 , 执行 菜 单 杜 中 的 【 渡 镜 】|【 模 糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 
钮 ， 然 后 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 8 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 4.74 所 示 。 


图 4.73 JEE [ər r 5ja] 参数 


步骤 06 执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 -38 度 ，【 距 离 】 更 
改 为 90 像素 ， 设 置 完成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.75 所 示 。 


图 4.74 添加 高 斯 模糊 


图 4.75 ”添加 动感 模糊 


步骤 07， 在 【图 层 】 面 板 中 选中 【阴影 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 图 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 4.76 
所 示 。 


步骤 08 ”选择 工具 箱 中 的 【画笔 工具 】 á ， 在 画布 中 单 击 鼠 标 右 键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 130 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 4.77 所 示 。 


图 4.76 ”添加 图 层 蒙 版 


图 4.77 设置 笔触 


步骤 09 ”将 前 景色 更 改 为 黑色 ， 人 在 其 图 像 部 分 区 域 涂抹 ， 将 其 隐藏 ， 如 图 4.78 所 示 。 


图 4.78 隐藏 图 像 


步骤 10 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 浅黄 色 (R: 244, G: 238, B: 203) ，【 描 
边 】 更 改 为 无 ， 绘 制 一 个 椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.79 所 示 。 


步骤 11 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 smk, 复制 三 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【 防 人 尘 草 】、【 面 分 】、【 边 缘 】 及 【轮廓 】， 如 图 4.80 所 示 。 
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图 4.80 复制 图 层 
步骤 12 在 【图 层 】 面 板 中 同时 选中 【 防 人 尘 章 】、【 面 倪 】 及 【边缘 】 图 层 ， 将 其 暂时 隐藏 。 
步骤 13 选中 【轮廓 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮， 在 菜单 中 选择 【 描 边 】 命 令 。 


步骤 14 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ，【 人 位置】 更改 为 【内 部 】，【 填 苑 类 型 】 更 改 为 【渐变 】，【 渐 变 】 
更 改 为 黄色 (R: 247, G: 183, B: 17) 到 黄色 (R: 230, G: 177, B: 35) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.81 所 示 。 


图 4.81 设置 【 描 边 】 参 数 


步骤 15 ”同时 选中 【 防 尘 草 】、【 面 急 】 及 【边缘 】 图 层 ， 将 图 形 等 比 缩小 ， 如 图 4.82 所 示 。 


步骤 16 再 选 中 【边缘 】 图 层 ， 将 图 形 【 填 充 】 更 改 为 深 红 色 (R: 64, G: 48, B: 46) ; 同时 选中 【 防 尘 日 】、【 面 
盆 】 图 层 ， 将 图 形 再 次 等 比 缩小 ， 如 图 4.83 所 示 。 


图 4.82 ”缩小 图 形 


图 4.83 ”变换 图 形 


步骤 17， 在 【图 层 】 面 板 中 选中 【边缘 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 痉 按钮 ， 在 荣 单 中 选择 【斜面 和 浮雕】 


人 人 
HD Zo 


步骤 18 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 6 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ，【 角 度 】 更 改 为 0%，【 高 光 模 式 】 中 的 
【不 透明 度 】 更 改 为 40%，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 40%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.84 所 示 。 
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图 4.84 设置 【斜面 和 浮雕 参数 


4.4.2 ”处 理 细节 元 又 
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步骤 01 在 【图 层 】 面 板 中 选中 【面盆 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【渐变 均 加 】 命 


Z J; 


令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 243, G: 243, B: 243) 到 灰色 (R: 213, G: 213, B: 213) , [# 
度 】 更 改 为 0， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.85 所 示 。 


步骤 02 选中 【 防 侍 日 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 .， 
如 图 4.86 所 示 。 


图 4.85 添加 渐变 


图 4.86 ”缩小 图 形 


步骤 03 在 【图 层 】 面 板 中 选中 【 防 尘 墅 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 条 按钮 ， 在 菜单 中 选择 【 淘 变 蔷 加 】 
命令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 红色 (R: 158, G: 4, B: 0) 到 橙色 (R: 250, G: 142, B: 85) ，【 和 角度】 更 
改 为 85 度 ， 如 图 4.87 所 示 。 


图 4.87 设置 【渐变 登 加 】 参 数 


步骤 04 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 60%， 取 消 
【使 用 全 局 光 】 复 选 框 ,将 【角度 】 更 改 为 113 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 
钮 ， 如 图 4.88 所 示 。 


图 4.88 RE [2322] 2 


步骤 05 在 【图 层 】 面 板 中 选中 【 防 尖 章 】 图 层 ， 将 其 复制 一 份 。 选 择 【 防 尖 章 拷贝 】 图 层 ， 并 稍微 向 左 侧 移 动 ， 双 击 
【添加 图 层 样式 】 fen, 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 日 色 到 灰色 (R: 197, G: 197, B: 197) ，【 角 度 】 更 改 为 
0， 如 图 4.89 所 示 。 
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图 4.89 #*# Zk [ər F £a] 参数 


步骤 06 选中 【投影 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深 红色 (R: 48, G: 30, B: 32) , 
【不 透明 度 】 更 改 为 15%，【 角 度 】 更 改 为 18 度 ，【 大 小 】 更 改 为 12 像 素 ， 完 成 乙 后 单 击 【 确 定 】 按 钮 ， 如 图 4.90 所 示 。 
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图 4.90 ”更改 【投影 】 参 数 


步骤 07， 选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 右上 角 位 置 绘制 一 
个 椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.91 所 示 。 


步骤 08 ”选中 【椭圆 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 芭 加 】，【 不 透明 度 】 更 改 为 50%， 这 样 就 完成 了 效果 的 制作 ， 
如 图 4.92 所 示 。 


图 4.91 绘制 椭 


图 4.92 最终 效 果 


45 ”纽扣 写实 图 标 


设计 构思 


本 例 讲解 制作 纽扣 写实 图 标 ， 此 款 图 标 在 制作 过 程 中 以 格子 纹理 为 背景 ， 将 纽扣 图 形 与 之 搭配 ， 通 过 拟 物 化 的 手法 完美 表现 
出 图 标的 特点 ， 最 终 效 果 如 图 4.93 所 示 。 


. 难 易 指数 : k k>k 
. 案例 位 置 : 源 文件 \ 第 4 章 \ 纽 扣 写 实 图 标 .psd 


“ 视频 位 置 : 视频 教学 \4.5 纽 扣 写 实 图 标 .avi 


图 4.93 ”最 终 效 果 


格子 纹理 纽扣 


主 色调 为 柔和 红色 ， 以 黄色 为 辅助 色 ， 红 色 格 子 纹 理 与 黄色 纽扣 搭配 十 分 协调 。 
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操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 男 布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
35 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 夫 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 4.94 所 示 。 


步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 疙 按钮 ， 在 菜单 中 选择 【渐变 妓 
加 】 人 命令， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 红色 (R: 232, G: 56, B: 45) 到 红色 (R: 255, G: 160, B: 120) ， 完 成 
之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.95 所 示 。 


图 4.94 22#J E] # £E3É 


图 4.95 ”添加 渐变 
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304 选择 工具 箱 中 的 【矩形 工具 】 恩 | ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 标 中 间 绘 制 一 个 
与 其 宽度 相同 的 和 矩形， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 4.96 所 示 。 


步骤 05 ”选中 【和 矩形 1】 图 层 


， 疝 下 移动 复制 一 份 ， 并 缩小 宽度 使 其 变 成 细 长 型 矩 形 ， 将 生成 一 个 【矩形 1 拷贝 】 图 层 ， 如 
图 4.97 所 示 。 


图 4.96 22] EJ 


图 4.97 复制 并 变换 矩形 


步骤 06 ”同时 选中 【和 矩 形 1 拷贝 】 及 【和 矩 形 】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 此 时 将 生成 一 个 【和 矩 形 1 拷 贝 】 图 层 。 


步骤 07 选中 【矩形 1 拷贝 】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 蔷 加 】，【 不 表 明 度 】 更 改 为 30%， 如 图 4.98 所 示 。 


TT AR ü 


图 4.98 设置 图 层 混 合 模式 


步骤 08 在 【图 层 】 面 板 中 选中 【和 矩形 1 拷贝 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【和 矩形 1 找 
贝 2】 图 层 。 


步骤 09 按 Ctrl+T 组 合 键 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 菜单 中 选择 【 逆 时 针 旋 转 90 度 】 命 令 ， 完 
成 之 后 按 Enter 键 确认 ， 如 图 4.99 所 示 。 


步骤 10 ”同时 选中 除 【 背 景 】 之 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【底座 】， 如 图 4.100 所 
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图 4.99 ”旋转 图 形 


图 4.100 “将 图 层 编组 


步骤 11 在 【图 层 】 面 板 中 选中 【底座 】 组， 单 击 面板 底部 的 【添加 图 层 样式 】 渡 按钮 ， 在 菜单 中 选择 【斜面 和 浮雕 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 13 像 素 ，【 软 化 】 更 改 为 13 人 和 像素，【 高 光 模 式 】 中 的 【不 透明 度 】 更 改 为 40%，【 阴 
影 模式 】 中 的 【不 透明 度 】 更 改 为 20%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.101 所 示 。 
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图 4.101 设置 【斜面 和 浮雕】 参数 
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纽扣 效果 


步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 €, Zri%mkrhis (3825] ag29506 (R: 218, G: 190, B: 175) , D 
边 】 更 改 为 无 ， 在 图 标 中 间 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.102 所 示 。 


步骤 02 ”选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 SI 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 如 图 4.103 所 示 ， 


图 4.102” 绘制 图 形 
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图 4.103 复制 图 层 


步骤 03 在 【图 层 】 面 板 中 选中 【 李 圆 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 fx 按钮 ， 在 菜单 中 选择 【渐变 又 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 浅 粉 色 (R: 224, G: 204, B: 190) 到 浅 粉 色 (R: 235, G: 226, B: 
220) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.104 所 示 。 


步骤 04 ”选中 【椭圆 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 4.105 所 示 。 
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图 4.104 添加 渐变 


图 4.105 ”缩小 图 形 


步骤 05 在 【 李 圆 1 拷贝 】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 合 令 ， 人 在 【椭圆 1 拷贝 2 】 
图 层 名 称 上 单 击 鼠 标 石 键 ， 从 弹出 的 快捷 荣 单 中 选择 【粘贴 图 层 样 式 】 命 令 。 


步骤 06 ”双击 【椭圆 1 拷贝 2】 图 层 样式 名 称 ， 在 弹出 的 对 话 框 中 选中 【渐变 蔷 加 】 复 选 框 ， 选 中 【 反 向 】 复 选 框 ， 完 成 之 
后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.106 所 示 。 


步骤 07 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 形 等 比 缩 小 ， 完 成 之 后 按 Enter 刍 确认， 如 图 4.107 所 示 。 


图 4.106 ”渐变 效果 


图 4.107 ”缩小 图 形 


步骤 08 ”选择 工具 箱 中 的 【椭圆 工具 】 总 ， 在 选项 栏 中 将 【填充 】 更 改 为 任意 颜色 ，【 描 边 】 更 改 为 无 ， 在 适当 位 置 按 住 
Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 4.108 所 示 。 


步骤 09 ”选中 【椭圆 2】 图 层 ， 辣 右 侧 平 移 复 制 一 份 ， 将 生成 一 个 【椭圆 2 拷贝 】 图 层 ， 如 图 4.109 所 示 。 


= 


<] 


绘制 正 


图 4.108 


图 4.109 复制 图 形 


步骤 10 ”同时 选中 【椭圆 2 拷贝 】 及 【椭圆 2】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 此 时 将 生成 一 个 【椭圆 2 拷贝 】 图 层 。 


步骤 11 在 【图 层 】 面 板 中 选中 【椭圆 2 拷贝 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 旦 按钮 上 ， 复 制 一 个 【椭圆 2 拷 
贝 2】 图 层 。 


步骤 12 按 Ctrl+T 组 合 键 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【 顺 时 针 旋 转 90 度 】 命 令 ， 完 
成 之 后 按 Enter 键 确认 ， 按 Ctrl+E 组 合 键 向 下 合并 ， 将 生成 一 个 【椭圆 2 拷 贝 2】 图 层 ， 如 图 4.110 所 示 。 


步骤 13 ”在 【图 层 】 面 板 中 ， 同 时 选中 【椭圆 1 拷贝 2】、【 椭 圆 1 拷贝 】 及 【椭圆 1】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 此 
时 将 生成 一 个 【组 1】 组 ， 再 单 击 面板 底部 的 【添加 图 层 蒙 版 】 刁 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 4.111 所 示 。 


图 4.110 ”复制 图 形 


图 4.111 添加 图 层 蒙 版 
步 又 14 按 住 Ctrl 键 单 击 【 李 圆 2 拷贝 2】 图 层 缩 贞 图 ， 将 其 载 入 选区 ， 如 图 4.112 所 示 。 


步骤 15 ”将 选区 填充 为 黑色 ， 隐 藏 部 分 图 形 ， 完 成 之 后 按 Ctrl+ D 组 合 键 取消 选区 ， 再 将 【椭圆 2 拷贝 2】 图 层 删除 ， 如 图 
4.113 所 泵 。 


图 4.112 # A 


图 4.113 ”隐藏 图 形 
步骤 16 在 【图 层 】 面 板 中 选中 【组 1】 组 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx en, 在 菜单 中 选择 【投影 】 命 令 。 
【颜色 】 更 改 为 深 红色 (R: 48, G: 30, B: 32) ，【 不 透 
【大 小 】 更 改 为 6 像素 ， 完 


步骤 17 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 单 】， 
【距离 】 更 改 为 6 像素 ， 


明度 】 更 改 为 50%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ， 
成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.114 所 示 。 
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图 4.114 设置 【投影 】 参数 
步骤 18 选择 工具 箱 中 的 【 李 圆 工具 ]】 © 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 标底 部 绘制 一 个 
椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 4.115 所 示 。 


步骤 19 ”执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.116 所 示 。 


图 4.115 


绘制 图 形 


图 4.116 ”添加 高 斯 模糊 


步骤 20 ”执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 。 


步骤 21 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 950 像素 ， 设 置 完成 乙 后 单 击 【 和 确定】 按钮 ， 这 样 瓯 完成 了 
效果 的 制作 ， 如 图 4.117 所 示 。 


图 4.117 ”最 终 效果 


46 购物 图 标 


本 例 讲解 绘制 购物 图 标 ， 此 款 图 标 在 制作 过 程 中 以 购物 特征 为 基础 ， 通 过 色彩 的 灵活 运用 及 特征 元 素 的 添加 ， 表 现 出 整个 图 
标的 可 识别 性 ， 最 终 效果 如 图 4.118 所 示 。 


. 难 易 指数 : kk 
` 案例 位 置 : 源 文件 \ 第 4 章 \ 购 物 图 标 .psd 


` 视频 位 置 : 视频 教学 \4.6 购 物 图 标 .avi 


图 4.118 ”最终 效果 


重点 分 解 


Al / SA E“ 


底部 轮廓 


绳子 


色彩 分 析 


主 色调 为 高 雅 某 色 ， 以 干净 黄色 作为 辅助 和 色 ， 整 体 色 调 与 购物 主题 十 分 搭配 。 


紫色 (R:196,G:135,B:231) 黄色 (R:249,G:232,B:186) 


4.6.1 ”制作 图 标 轮 慷 


绘制 轮廓 图 形 


制作 波 点 纹理 


图 标 轮 廊 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 380 像 素 ，【 分 
辩 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空白 画布 ， 将 画布 填充 为 紫色 (R: 228, G: 190, B: 221) 到 黄色 (R: 248, G: 235, B: 
215) 的 线性 渐变 。 


步骤 02， 选 择 工具 箱 中 的 【 圆 角 矩 形 工具 】 Ë) ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 
为 40 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 1】 图 层 ， 如 图 4.119 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷贝 】 图 层 ， 如 图 4.120 所 示 。 


图 4.119 ”绘制 圆 角 矩形 


图 4.120 复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 贡 按 钮 ， 在 菜单 中 选择 【渐变 赤 


加 】 命 令 。 


步骤 05 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 (R: 196, G: 135, B: 231) 到 浅 紫 色 (R: 249, G: 228, B: 
243) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 4.121 所 示 。 


图 4.121 添加 渐变 
步骤 06 选中 【 圆 角 起 形 1 拷 贝 】 图 层 ， 将 其 图 形 【 填 人 苑 】 更 改 为 灰色 (R: 240, G: 240, B: 240) 。 


步骤 07 ”选择 工具 箱 中 的 【直接 选择 工具 】 R. 同时 选中 图 形 底 部 两 个 锚 操 ， 将 其 删除 ;再 同 时 选中 图 形 左下 角 和 右 下 角 
销 点 向 上 拖 动 缩短 其 高 度 ， 如 图 4.122 所 示 。 


图 4.122 ”缩小 图 形 高 度 


又 08 ”选择 工具 箱 中 的 【椭圆 工具 】 e, TFI rS DB26] SEr27J5S65, Du] SErR2J2G, frimlfb ZE E f81u Es ie 


u 


住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.123 所 示 。 


图 4.123 ”绘制 图 形 


步骤 09 按 Ctrl+Alt+T 组 合 键 将 正 圆 向 右 侧 平移 复制 一 份 ， 如 图 4.124 所 示 。 


步骤 10 按 住 Ctrl+Alt+shift 组 合 键 的 同时 按 T 键 多 次 ， 执 行 多 重复 制 售 令 ， 将 图 形 复制 多 份 ， 如 图 4.125 所 示 。 


图 4.124 ”变换 复制 


图 4.125 ”多 重复 制 


步骤 11 同时 选中 所 有 和 【椭圆 1】 图 层 相 关 的 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ; 再 以 同样 的 方法 将 其 向 下 垂直 复制 多 份 ， 
直到 铺 满 整个 画布 ， 如 图 4.126 所 示 。 


e ° @ @ @ ə 
e ° @ @ @ ə 
图 4.126 ”复制 图 形 


步骤 12 ”同时 选中 所 有 和 小 圆 相 天 的 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 将 生成 的 图 层 名 称 更 改 为 【 波 点 】， 如 图 4.127 所 


Ë] | 
2 
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步骤 13 ”选中 【 波 点 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 忆 后， 在 选项 栏 的 【旋转 】 文 本 
框 中 输入 45， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.128 所 示 。 


图 4.127 ”会 并 图 层 


图 4.128 ”旋转 图 形 


步骤 14 在 【图 层 】 面 板 中 选中 【 波 点 】 图 层 ， 将 其 图 层 混合 模式 更 改 为 【 寺 加 】， 【不 透明 硫 】 更 改 为 30%， 再 移 至 
【 圆 角 和 矩形 1 拷贝 】 图 层 下 方 ， 并 单 击 面板 底部 的 【添加 图 层 蒙 版 】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 4.129 所 示 。 


步骤 1? ” 按 住 Ctrl 键 单 击 【 圆 角 算 形 1】 图 层 缩 贞 图 ， 将 其 载 入 选区 ， 如 图 4.130 所 示 。 


图 4.129 ”添加 图 层 蒙 版 
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图 4.130 # A ¿E 


步骤 16 HB y2nesB4=rRBJ [një] | [sz] ep<, 1S1eD<e5zIn), JS1EPCIRZ57J 565, Beupunn2yEElZ, s=pk< SFzCtri+ DZB 
合 键 取 消 选 区 ， 如 图 4.131 所 示 。 


图 4.131 隐藏 图 形 


46.2 ”绘制 绳子 


处 理 小 孔 效 果 


制作 绳子 


绳子 效果 


步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 仿 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 144, G: 133, B: 127) , [3835] 
更 改 为 无 ， 在 图 标 左 上 角 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.132 所 示 。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 辰 部 的 【创建 新 图 层 】 国 按 钮 上 ， 复制 一 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【内 和 孔 】 和 【边缘 】， 如 图 4.133 所 示 。 


图 4.132 ”绘制 正 贺 


RN 


图 4.133 复制 图 层 


步骤 03， 在 【图 层 】 面 板 中 选中 【边缘 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 亦 按 钮 ， 在 荣 单 中 选择 【渐变 晋 加 】 命 


As 
Xo 


步骤 04 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 (R: 239, G: 195, B: 115) 到 黄色 (R: 255, G: 236, B: 
169) ， 如 图 4.134 所 示 。 
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图 4.134 设置 【渐变 登 加 】 参数 


步骤 05 ”选中 【外 发 光 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 40%，【 颜 色 】 更 改 为 深 黄 色 
(R: 54, G: 38, B: 6) ，【 大 小 】 更 改 为 3 像素 ， 如 图 4.135 所 示 。 
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图 4.135 ”设置 【外 发 光 】 参 数 


步骤 06 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 革 加 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 距 
离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.136 所 示 。 
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图 4.136 设置 【投影 】 参数 
步骤 07 ”在 【图 层 】 面 板 中 选中 【内 孔 】 图 层 ， 将 其 适当 缩小 ， 单 击 面板 底部 的 【添加 图 层 样式 ]】 fin, 在 菜单 中 选择 
【内 发 光 】 命 令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 改 为 黑色 ，【 大 
小 】 更 改 为 8 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.137 所 示 。 
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图 4.137 设置 【内 发 光 】〗 参数 
步骤 08 同时 选中 【内 孔 】 及 【边缘 】 图 层 ， 向 右 侧 平 移 复 制 一 份 ， 如 图 4.138 所 示 。 


步骤 09 同时 选中 【内 和 孔 】、【 边 缘 】、【 内 和 孔 拷 贝 】 及 【边缘 拷贝 】 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 
更 改 为 【绳子 孔 】， 如 图 4.139 所 示 。 


图 4.138 复制 图 形 
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图 4.139 ”将 图 层 编 组 
提示 与 技巧 
将 图 层 编组 是 为 了 更 好 地 管理 图 层 ， 特 别 是 在 图 层 数 量 较 多 的 情况 下 ， 要 养 成 编组 管理 图 层 的 好 习惯 。 
步骤 10 选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】[ “| 按 钮 ， 在 弹出 的 选项 中 选择 【 形 


状 】， 将 【 填 爷 】 更 改 为 无 ，【 摘 边 】 更 改 为 昌 色 ，【 宽 度 】 更 改 为 15 点 ， 在 两 个 孔 之 间 绘 制 一 条 续 段 ， 将 生成 一 个 【形状 1j】 
色 层 。 


步骤 11 单 击 【 设 置 形状 描 边 类 型 】 一 一 "| 按钮 ， 在 弹出 的 面板 中 单 击 【端点 】 按 钮 ， 在 弹出 的 选项 中 选择 第 二 种 圆 形 类 
型 ， 如 图 4.140 所 示 ， 


步骤 12 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Sl 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【高 光 】、【 强 子 】 及 【阴影 】， 如 图 4.141 所 示 。 


图 4.140 ”绘制 线段 


图 4.141 复制 图 层 


步骤 13 ”在 【图 层 】 面 板 中 选中 【绳子 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 亦 按钮 ， 在 菜单 中 选择 【渐变 晋 加 】 命 


As 
Xo 


步骤 14 ”在 弹出 的 对 话 框 中 将 【新 变 】 更 改 为 灰色 (R: 205, G: 205, B: 205) 到 灰色 (R: 232, G: 232, B: 
232) ，【 缩 放 】 更 改 为 50%， 如 图 4.142 所 示 。 


图 4.142 ZE [ər k #&jo] 参数 


步骤 12 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 30%， 取 消 
【使 用 全 局 光 】 复 选 框 ， 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【确定 】 按 
钮 ， 如 图 4.143 所 示 。 


图 4.143 ”设置 【投影 】 参 数 


步骤 16 选中 【高 光 】 图 层 ， 将 其 图 形 【 摘 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 ?5 点 ， 如 图 4.144 所 示 。 


步骤 17， 选 择 工具 箱 中 的 【直接 选择 工具 】 Ë ， 拖 动 线段 锚 点 ， 将 其 变形 ， 如 图 4 145 所 示 . 


图 4.144 更 改 描 边 


图 4.145 ”调整 锚 点 


步骤 18 执行 菜单 栏 中 的 【 渡 镜 】|【 模 糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 人 化】 按钮， 然后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.146 所 示 。 


步骤 19 ”选择 工具 箱 中 的 【钢笔 工具 】 必 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路 按钮， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 无 ，【 描 边 】 更改 为 灰色 (R: 171, G: 171, B: 171) ，【 宽 度 】 更 改 为 0.5 点 ， 在 绳子 左上 角 位 置 
绘制 一 条 线条 ， 如 图 4.147 所 示 . 


图 4.146 ”添加 高 斯 模糊 


图 4.147 ”绘制 线条 


步骤 20 按 Ctrl+Alt+T 组 合 键 ， 当 出 现 变 形 框 乙 后 ， 将 中 心 点 移 人 至 右 侧 位 置 ， 将 旋转 复制 一 份 ， 完 成 之 后 按 Enter 键 确认 ， 
如 图 4.148 所 示 。 


步骤 21 按 住 Ctrl+Alt+Shift 组 合 键 的 同时 按 T 键 多 次 ， 执 行 多 重复 制 命令 ， 将 线段 复制 多 份 ， 如 图 4.149 所 示 。 


图 4.148 ”变换 复制 


B 


图 4.149 ”多 重复 制 


步骤 22 ”同时 选中 所 有 和 绪 条 相 天 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【纹理 】， 按 Ctrl+E 组 合 键 
将 其 合并 ， 将 生成 一 个 【纹理 】 图 层 ， 如 图 4.120 所 示 。 


步骤 23 ” 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 像 适 当 旋转 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.151 所 示 。 


图 4.150 “合并 组 


图 4.151 ”旋转 图 像 


步骤 24 ”同时 选中 【高 光 】 及 【绳子 】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【绳子 】。 


步骤 25 ”选中 【纹理 】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 
像 ， 再 将 其 图 层 【 不 透明 度 】 更 改 为 20%， 如 图 4.122 所 示 。 


图 4.152 ”创建 剪贴 蒙 版 


步骤 26 选中 【阴影 】 图 层 ， 将 其 图 形 【 描 边 】 更 改 为 黑色 ， 再 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换】 合 令 ， 将 其 宽大 缩 
小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.153 所 示 。 


步骤 27 执行 菜单 栏 中 的 【 滤 镜 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.154 所 示 。 
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图 4.153 ”将 线段 变形 


图 4.154 ”添加 高 斯 模糊 


步骤 28 ”选中 【阴影 】 图 层 , 将 其 图 层 【 不 透明 度 】 更 改 为 35%， 如 图 4.155 所 示 。 


图 4.155 更改 图 层 不 透明 度 


4.6.3 ”绘制 标签 


制作 标签 轮廓 


阴影 效果 


标签 图 像 


步骤 01 选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 249, G: 232, B: 186) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 像素， 绘制 一 个 圆 角 目 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 2】 图 层 ， 如 图 4.126 所 示 。 
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步骤 02 ”选择 工具 箱 中 的 【添加 锚 点 工具 】 好 ， 在 圆 角 和 矩形 右 侧 边 缘 单 击 添加 锚 点 ， 如 图 4.157 所 示 。 


图 4.156 ”绘制 圆 角 和 矩形 


图 4.157 ”添加 锚 点 


步骤 03 ”选择 工具 箱 中 的 【删除 锚 点 工具 】 >， 分 别 在 圆 角 矩 形 右上 角 和 右 下 角 锚 点 上 单 击 ， 将 其 删除 ， 如 图 4.158 所 


步骤 04 ”选择 工具 箱 中 的 【转换 点 工具 】 ` 在 添加 的 销 点 上 单 击 ， 选 择 工 具 箱 中 的 【直接 选择 工具 :] R. 拖 动 锁 点 ， 将 
图 形变 形 ， 如 图 4.159 所 示 。 


图 4. 
158 删除 锚 点 


图 4.159 ”将 图 形变 形 


步骤 05 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 圆 角 和 矩形 位 置 添加 文字 ( 方 正三 这 细 黑 GB) ， 如 图 4.160 所 示 。 
步骤 06 同时 选中 【SALE】 及 【 圆 角 和 矩 形 2】 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【标签 】。 


步骤 07 选中 【标签 】 组 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 科 
切 】 命 令 ， 拖 动 变形 框 控 制 点 将 图 形变 形 ， 青 适当 旋转 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.161 所 示 。 


图 4.160 ”添加 文字 


图 4.161 将 图 形变 形 


步骤 08 ”同时 选中 所 有 和 标签 相关 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【标签 】， 再 单 击 【 添 加 图 
层 蒙 版 】 回 按钮 为 其 添加 图 层 蒙 版 ， 如 图 4 162 所 示 。 


步骤 09 选择 工具 箱 中 的 【钢笔 工具 】 2 沿 标 签 与 绳子 重 蔷 的 左 半 部 分 区 域 绘制 一 个 封闭 路 径 ， 如 图 4.163 所 示 。 


图 4.162 ”添加 图 层 蒙 版 
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图 4.163 ”绘制 路 径 
步骤 10 ”将 路 径 转换 为 选区 ， 将 选区 填充 为 黑色 ， 隐 藏 部 分 图 形 ， 完 成 乙 后 按 Ctrl+D 组 合 键 取 消 选 区 ， 如 图 4.164 所 示 。 


步骤 11 选择 工具 箱 中 的 【钢笔 工具 】 2, 在 选项 栏 中 单 击 【 选 择 工 具 模 式 】 | 路 径 :| 按钮 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 灰色 (R: 103, G: 103, B: 103) ，【 摘 边 】 更 改 为 无 。 


步骤 12 ”在 隐藏 图 形 后 的 位 置 绘制 一 个 不 规则 图 形 ， 此 时 将 生成 一 个 【形状 1】 图 层 ， 如 图 4.165 所 示 。 


图 4.164 ”隐藏 图 形 


图 4.165 ”绘制 图 形 


步骤 13 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 人 在 标签 图 形 底部 绘制 一 个 灰色 (R: 127, G: 127, B: 127) 不 规则 图 形 ， 将 
生成 一 个 【形状 2】 图 层 ， 将 其 移 人 至 【标签 】 组 下 方 ， 如 图 4.166 所 示 。 


步骤 14 执行 菜单 柱 中 的 【 渡 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.167 所 示 。 


图 4.166 ”绘制 图 形 


图 4.167 制作 投影 


步骤 12 ”选中 【形状 2】 图 层 ， 将 其 图 层 【 不 透明 度 】 更 改 为 60%， 如 图 4.168 所 示 。 


步骤 16 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 图 标底 部 绘制 一 个 
椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 将 其 移 全 【背景 】 图 层 上 方 ， 如 图 4.169 所 示 。 


图 4.168 ”降低 不 透明 度 


图 4.169 ”绘制 椭 


步骤 17 ”执行 荣 单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 局 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.170 所 示 。 


步骤 18 执行 菜单 杜 中 的 【 滤 镜 】| 【模糊 】| 【动感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0，，【 距 离 】 更 改 为 
100 像 素 ， 设 置 完成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 4.171 所 示 。 


图 4.170 “添加 高 斯 模糊 


图 4.171 最终 效果 


4.7 质感 笔记 图 标 


设计 构思 


本 例 讲解 绘制 质感 笔记 图 标 ， 该 图 标 以 牛皮 纹理 作为 主体 轮廓 ， 通 过 绘制 直 实 纸张 及 铅笔 图 像 ， 全 面 提 升 了 图 标的 可 识别 性 
及 实用 性 ， 最 终 效 果 如 图 4.172 所 示 。 


. 难 易 指数 : kkkkx 
素材 位 置 : 调用 素材 \ 第 4 章 \ 质 感 笔记 图 标 


. 案例 位 置 : 源 文件 \ 第 4 章 \ 质 感 笔记 图 标 .psd 


- 视频 位 置 : 视频 教学 \4.7 质 感 笔 记 图 标 .avi 
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主 色调 为 科技 蓝 ， 以 浅黄 色 作 为 辅助 色 ， 协 调 的 颜色 组 合 保证 了 图 标 真 实 性 。 


| [| 
蓝 色 (R:31,G:153,B:216) 浅黄 色 (R:252,G:237,B:217) 粉色 (R:248,G:126,B:198) 


4.7.1 ”制作 质感 轮 局 
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轮 慷 效果 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 00 像素 ，【 高 度 】 为 200 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 斗 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 乱 形 工具 】 e 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
250 像素 ， 按 住 Shift 键 绘制 一 个 圆 角 直 形 ， 此 时 将 生成 一 个 【 圆 角 抵 形 1】 图 层 ， 如 图 4.173 所 示 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【 贺 角 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 加 按钮 上 ， 复 制 一 个 【 圆 角 短 
形 1 拷贝 】 图 层 ， 如 图 4.174 所 示 。 


图 4.173 2] B] # £#EJE 
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图 4.174 复制 图 层 


步骤 04 ”执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 4 草 \ 质 感 笔记 图 标 \ 牛 颇 纹理 jpg” 文 件 , 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 更 改 其 图 层 名 称 为 【图 层 1】， 并 将 其 移 公 【 圆 角 和 矩形 1 拷贝 】 图 层 下 方 ， 如 
图 4.175 所 示 。 


步骤 05 ”选中 【图 层 1】 图 层 , 执行 菜单 栏 中 的 【图 层 】|【 创 建 齐 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 
像 ， 骨 将 图 像 等 比 缩小 ， 如 图 4.176 所 示 。 


步骤 06 同时 选中 【图 层 1】 及 【 圆 角 起 形 1】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 生 成 一 个 【组 1】 组 。 


图 4.175 ”添加 素材 


图 4.176 ”创建 剪贴 蒙 版 


步骤 07 ”在 【图 层 】 面 板 中 选中 【组 1】 组 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【斜面 和 浮雕 】 命 


少 


步骤 08 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 1 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 0，【 光 泽 等 高 线 】 
更 改 为 环形 ，【 高 光 模 式 】 更 改 为 【 柔 光 】，【 不 透明 度 】 更 改 为 35%，【 阴 影 模式 】 更 改 为 【 柔 光 】，【 不 透明 度 】 更 改 为 
50%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.177 所 示 。 


SEPSE 
一 结构 
深度 [Dj mr i |w 
fel: @) F (O T 
Kh == ws 
pk —== es 


PBHg2 


角度 (NJ: _ b E 


可 [| 使 用 全 局 光 (G) 
sm s m jm 
Ne [ J WBS ( 
高 光 异 式 ; | 
Bd: 2 — — “| Tg 
+qEBBE(c: y= 0 w 


| Wm hui | | Eiz2mhA8 | 


图 4.177 设置 【斜面 和 浮雕 】 参 数 


步骤 09 ”选中 【 圆 角 矩 形 1 拷贝 】 图 层 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 浅黄 色 (R: 255, G: 
243, B: 231) ，【 宽 度 】 更 改 为 2 点 ， 单 击 【 设 置 形状 描 边 类 型 】| 一 一 "| 按钮 ， 在 弹出 的 选项 中 选择 第 二 种 描 边 类 型 ， 再 将 


图 形 等 比 缩小 ， 如 图 4.178 所 示 。 
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图 4.178 ”属性 更 改 


步骤 10 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩 形 1 拷贝 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 P pn, 在 菜单 中 选择 【 科 
面 和 浮 肤 】 命 令 。 


步骤 11 在 弹出 的 对 话 框 中 将 【样式 】 更 改 为 【 杭 状 浮雕 】，【 万 法 】 更 改 为 【雕刻 清晰 】，【 大 小 】 更 改 为 0 像素 ， 取 消 
【使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 0，【 光 泽 等 高 线 】 更 改 为 环形 ，【 高 光 模 式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 
为 50%，【 阴 影 模式 】 更 改 为 【 茎 加 】，【 不 透明 度 】 更 改 为 50%， 如 图 4.179 所 示 。 
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图 4.179 ”设置 【斜面 和 浮雕 】 参数 


步骤 12 ”选中 【投影 】 复 选 框 , 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 80%， 取 消 【 使 用 全 局 光 】 复 选 
NE; 将 【大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.180 所 示 。 
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图 4.180 设置 【投影 】 参 数 


4.7.2 ”制作 纸张 图 像 
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处 理 卷 边 效果 
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纸张 图 像 


步骤 01 选择 工具 箱 中 的 【 圆 角 算 形 工具 】 ə 在 选项 栏 中 将 【填充 】 更 改 为 浅黄 色 (R: 252, G: 237, B: 217) , 
【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 40 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 和 矩 形 ， 此 时 将 生成 一 个 【 圆 角 和 矩 形 2】 图 层 ， 如 图 4.181 
所 示 。 


步 又 02， 在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 三 个 拷贝 图 
层 ， 分 别 将 图 层 名 称 更 改 为 【纸张 】、 【纸张 2】、 【纸张 3】 及 【纸张 4】 图 层 ， 如 图 4.182 所 示 。 
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图 4.182 ”复制 图 层 


步骤 03 ”在 【图 层 】 面 板 中 选中 【纸张 4】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 巷 按钮 ， 在 荣 单 中 选择 【投影 】 命 令 。 


步骤 04 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 不 透明 度 】 更 改 为 30%，【 距 离 】 更 改 为 1 像素 ， 完 成 之 后 
单 击 【 确 定 】 按 钮 ， 如 图 4.183 所 示 。 
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图 4.183 KE [232] Z 


步骤 05 ”在 【纸张 4】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 合 令 ， 同 时 选中 【纸张 3】、 
【纸张 2】 及 【纸张 】 图 层 ， 在 图 层 名 称 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【粘贴 图 层 样式 】 个 令 ， 如 图 4.184 所 示 。 


步骤 06 选中 【纸张 3】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 拖 动 变形 框 底部 控制 点 ， 将 图 形 高 硫 稍 微缩 
小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.185 所 示 。 


图 4.184 ”粘贴 图 层 样 式 
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图 4.185 ”缩小 图 形 高 度 


步骤 07 ”以 同样 的 万 法 分 别 选中 【纸张 2】 及 【纸张 】 图 层 ， 在 画布 中 将 图 形 高 度 适当 缩小 ， 如 图 4.186 所 示 。 
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图 4.186 ”缩小 图 形 高 度 
提示 与 技巧 
在 缩小 当前 图 形 高 度 时 ， 可 将 上 方 图 层 暂 时 隐藏 。 
步 桑 08 选择 工具 箱 中 的 【钢笔 工具 】E ， 在 选项 栏 中 单 击 【 选 择 工 具 模式 】[ 器 ”按钮 ， 在 弹出 的 选项 中 选择 【 形 


状 】， 将 【填充 】 更 改 为 黑色 ，【 摘 边 】 更 改 为 无 ， 在 纸张 右 下 角 绘 制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 
4.187 所 泵 。 
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步骤 09 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Pez, ¿rszsarhikke (Wi2FES)n] 
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步骤 10 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 系 渐变 ，【 角 度 】 更 改 为 -47 度 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 
4.188 所 示 。 
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图 4.188 ”设置 【 淅 交 又 加 】 参数 


步骤 11 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】[ Be “| 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 深 黄色 (R: 159, G: 136, B: 104) ，【 描 边 】 更 改 为 无 ， 在 图 标 右 下 位 置 绘制 一 个 三 角形 ， 此 时 
将 生成 一 个 【形状 2】 图 层 ， 如 图 4.189 所 示 。 


步骤 12 ”将 其 移 全 【形状 1】 图 层 下 方 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 如 图 
4.190 所 示 。 


图 4.189 ”绘制 图 形 
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步骤 13， 在 【图 层 】 面 板 中 选中 【形状 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
4.191 所 泵 。 
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El 按钮 ， 在 图 形 上 拖 


步骤 14， 选 择 工具 箱 中 的 【渐变 工具 】 芽 ] ， 编 辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 
动 ， 隐 藏 部 分 图 形 ， 如 图 4.192 所 示 。 


图 4.191 添加 图 层 蒙 版 
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图 4.192 ”隐藏 图 形 


步骤 15 ”选择 工具 箱 中 的 【椭圆 工具 】 重 ， 在 选项 栏 中 将 【填充 】 更 改 为 深 黄 色 (R: 159, G: 136, B: 104) , DE 
边 】 更 改 为 无 ， 在 卷 边 图 形 位 置 绘制 一 个 椭圆 图 形 并 适当 旋转 ， 将 生成 一 个 【椭圆 1】 图 层 ， 将 其 移 全 【形状 1】 图 层 下 方 ， 如 
图 4.193 所 示 。 


步骤 16 执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 15 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.194 所 示 。 
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图 4.194 ”添加 高 斯 模糊 


步骤 17 ”选择 工具 箱 中 的 【多 边 形 套 系 工具 1 y, 在 图 像 右 下 角 位 置 绘制 一 个 三 角形 选区 ， 以 选中 部 分 多 余 的 图 像 ， 如 图 
4.195 所 示 。 


步骤 18 选中 【椭圆 1】 图 层 ， 按 Diete 键 将 选区 中 的 图 像 删 除 ， 完 成 之 后 按 Ctrl+D 组 合 键 取消 选区 ， 再 将 其 图 层 【 不 透明 
度 】 更 改 为 80%， 效 果 如 图 4.196 所 示 。 


时 
加 


1 
| 


a 


/ 


图 4.195 ”绘制 选区 
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图 4.196 ”删除 图 像 
步骤 19 ”同时 选中 所 有 和 纸张 相关 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 一 个 【组 2】 组 。 


步骤 20 ”在 【图 层 】 面 板 中 选中 【组 2】 组 ， 单 击 面板 底部 的 【添加 图 层 样式 】 festa, 在 菜 蛙 中 选择 【外 友 光 】 命 令 ， 
在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 改 为 黑色 ，【 大 小 】 更 改 为 5 像素 ， 
完成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.197 所 示 。 
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图 4.197 ”设置 【外 发 光 】 参 数 


4.7.3 ”绘制 铅笔 


制作 橡皮 图 像 
制作 笔 喘 质感 
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铅笔 图 像 


步骤 01 选择 工具 箱 中 的 【矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 31, G: 153, B: 216) ，【 描 边 】 


更 改 为 无 ， 绘 制 一 个 矩形， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 4.198 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 笃 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 矩形 左 侧 位 置 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 3】 图 层 ， 如 图 
4.199 所 示 。 
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图 4.198 ”绘制 矩形 
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图 4.199 ”绘制 图 形 


步骤 03 ”在 【形状 3】 图 层 上 单 击 鼠 标 右键 ， 在 弹出 的 快捷 菜单 中 选择 【 栅 格 化 图 层 】 命 令 ; 选择 工具 箱 中 的 【椭圆 选区 工 
具 】*》， 在 图 像 左 侧 绘制 一 个 椭圆 ， 如 图 4.200 所 示 。 


步骤 04 ”执行 菜单 柱 中 的 【图 层 】| 【新建 】| 【通过 蔓 切 的 图 层 】 命 令 ， 此 时 将 生成 一 个 【图 层 2】 图 层 ， 如 图 4.201 所 示 。 


图 4.200 2⁄]48 
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图 4.201 通过 剪 切 的 图 层 


步骤 05 ”在 【图 层 】 面 板 中 选中 【图 层 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 按钮 ， 在 菜单 中 选择 【渐变 堵 加 1 
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步骤 06 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 砍 色 (R: 52, G: 54, B: 53) 到 灰色 (R: 224, G: 224, B: 224) 再 到 
灰色 (R: 209, G: 209, B: 209) ， 将 中 间 灰 色色 标的 位 置 更 改 为 65%，【 缩 放 】 更 改 为 70%， 完 成 之 后 日 击 【确定 】 按 
钮 ， 如 图 4.202 所 示 。 


图 4.202 ZE [ər k #jo] 参数 


步骤 07 ”在 【图 层 】 面 板 中 选中 【形状 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Pesan, 在 菜单 中 选择 【 淘 变 十 加 】 


í< 
HU o 


步骤 08 fr5štHBJXusierhis [ñrz2z] SirVJiSRSES (R: 167, G: 72, B: 33) 到 黄色 (R: 252, G: 214, B: 
163) ， 完 成 乙 后 单 击 【确定 】 按 钮 ， 如 图 4.203 所 示 。 
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图 4.203 ”添加 【 淅 交 又 加 】 参数 


在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六， 在 菜单 中 选择 【渐变 到 加 】 命 


在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 系 渐变 ， 完 成 乙 后 单 击 【 确 定 】 按 钮 ， 如 图 4.204 所 示 。 
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图 4.204 ”设置 【 淅 交 又 加 】 参数 
提示 与 技巧 


此 处 渐变 颜色 色 标 设置 建议 如 下 图 所 示 。 


步骤 11 在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 l 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【橡皮 】、【 人 金属 】 及 【 笔 身 】， 如 图 4.205 所 示 。 
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图 4.205 ”复制 图 层 


步骤 12 ”选中 【人 金属】 图 层 ， 在 画布 中 将 图 形 宽 度 缩小 ， 并 更 改 其 渐变 颜色 ; 以 同样 的 方法 选中 【橡皮 】 图 层 ， 更 改 图 形 
宽度 及 渐变 颜色 ， 如 图 4.206 所 示 。 


图 4.206 ”更改 渐变 颜色 


提示 与 技巧 


在 更 改 橡皮 渐变 颜色 时 ， 可 根据 实际 的 橡皮 颜色 进行 设置 ， 颜 色 值 并 非 固定 ， 只 需要 与 笔 身 保持 协调 即 可 。 


步骤 13 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 粉红 色 (R: 248, G: 126, B: 198) ，【 描 
边 】 更 改 为 无 ， 在 橡皮 右 侧 绘 制 一 个 椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 4.207 所 示 。 


步骤 14 ”同时 选中 所 有 和 铅笔 相关 的 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 铝 笔 】。 


步骤 15 “在 【图 层 】 面 板 中 选中 【铅笔 】 组， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 导 按钮 上 ， 复 制 一 个 【铅笔 拷贝 】 组 ， 
如 图 4.208 所 示 。 


图 4.207 ”绘制 图 形 
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图 4.208 ”将 图 层 编 组 


步骤 16 在 【图 层 】 面 板 中 选中 【铅笔 拷贝 】 组 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 再 将 【铅笔 】 图 层 隐 藏 ， 如 图 4.209 所 示 。 


步骤 17 ”选中 【铅笔 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 适 当 旋 转 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 4.210 所 示 。 
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图 4.209 ”合并 组 
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图 4.210 ”旋转 图 像 


步骤 18 在 【图 层 】 面 板 中 选中 【铅笔 拷贝 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 蝎 按钮 上 ， 复 制 一 个 【铅笔 拷贝 
2】 图 层 ， 如 图 4.211 所 示 。 


步骤 19 ”在 【图 层 】 面 板 中 选中 【铅笔 拷贝 】 图 层 ， 单 击 面板 上 方 的 【锁定 透明 像素 】 图 按钮 ， 锁 定 透明 像素 ， 将 图 像 填 
充 为 黑色 ， 填 充 完成 之 后 再 次 日 击 此 按钮 锁定 解除 ， 骨 将 图 像 同 下 稍微 多 动 ， 如 图 4.212 所 示 。 


图 4.211 锁定 透明 像素 并 填充 颜色 
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图 4.212 移动 图 像 


步骤 20 ”执行 菜单 柱 中 的 【 渡 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.213 所 示 。 
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图 4.213 ”添加 高 斯 模糊 


步骤 21 在 【图 层 】 面 板 中 选中 【铅笔 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 图 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
4.214 所 元 。 


步骤 22 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 
为 50 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 4.215 所 示 。 


图 4.215 ”设置 笔触 


步骤 23 ”将 前 景色 更 改 为 黑色 ， 在 其 图 像 部 分 区 域 涂抹 ， 将 其 隐藏 制作 出 真实 的 阴影 效果 ， 这 样 残 完成 了 效果 的 制作 ， 如 
图 4.216 所 示 。 


图 4.216 最终 效 果 


48 ”质感 插座 图 标 


设计 构思 


本 例 讲解 制作 质感 播 座 图 标 ， 该 图 标 以 真实 的 播 座 为 基础 图 像 ， 进 行 拟 物化 写实 制作 ， 最 终 效果 如 图 4.217 所 示 。 
. 难 易 指数 : kk k yc x 
. 案例 位 置 : 源 文件 \ 第 4 章 \ 质 感 插座 图 标 .psd 


` 视频 位 置 : 视频 教学 \4.8 质 感 插座 图 标 .avi 


图 4.217 ”最终 效果 


重点 分 解 
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面板 插 孔 
色彩 分 析 


主 色调 为 质感 金属 黄 ， 以 蓝 色 作为 辅助 色 ， 黄 色 面板 与 蓝 色 指 示 灯 完美 表现 出 科技 插座 的 效果 。 


— s 
黄色 (R:222,G:216,B:204) 蓝 色 (R:0,G:168,B:255) 


4.8.1 ”绘制 插座 轮 万 


处 理 高 光 质 感 


处 理 接 纺 效果 


制作 轮廓 质感 


轮 慷 图 像 效 果 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 380 像 素 ，【 分 
状 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 蓝 色 (R: 122, G: 145, B: 173) 到 蓝 色 (R: 44, G: 60, B: 
79) 的 径 向 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 222, G: 216, B: 204) , [j# 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 2 像素 ， 按 住 Shift 键 绘制 一 个 圆 角 和 矩形 ， 此 时 将 生成 一 个 【 圆 角 矩形 1】 图 层 ， 如 图 4.218 所 示 。 


图 4.218 ”绘制 圆 角 适 形 


步骤 03 单 击 面板 底部 的 【添加 图 层 样式 】 训 按钮， 在 菜单 中 选择 【斜面 和 浮雕 】 命令 。 


步骤 04 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【和 角度】 更 改 为 0，【 高 光 模 式 】 更 
改 为 【正常 】，【 颜 色 】 更 改 为 白色 ，【 不 透明 度 】 更 改 为 70%，【 阴 影 模 式 】 更 改 为 【正常 】， 【不 透明 度 】 更 改 为 70%， 
【颜色 】 更 改 为 白色 ， 如 图 4.219 所 示 。 
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图 4.219 jJ XE [ëL G 46 E] # E 


步骤 05 ”选中 【渐变 区 加 】 复 选 框 ,将 【不 透明 度 】 更 改 为 30%，【 淘 变 】 更 改 为 深 黄色 (R: 49, G: 43, B: 31) 到 深 
黄色 (R: 49, G: 43, B: 31) ， 并 分 别 调整 两 个 渐变 色 标 的 位 置 ， 如 图 4.220 所 示 。 


步骤 06 ”选中 【内 阴影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 白色 ，【 不 透明 度 】 更 改 为 50%， 取 
消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【 确 定 】 按 
钮 ， 如 图 4.221 所 示 。 


图 4.220 ZE [ər k #jo ] 参数 


在 调整 渐变 色 标 的 位 置 时 ， 可 参考 如 下 设置 。 
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图 4.221 设置 【内 阴影 】 参 数 


步骤 07 ”选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 插座 靠 顶部 绘制 一 
个 矩形 ， 此 时 将 生成 一 个 【和 窍 形 1】 图 层 ， 如 图 4.222 所 示 。 


步骤 08 将 【 答 形 1】 图 层 【填充 】 更 改 为 0%6， 再 单 击 面板 底部 的 【添加 图 层 样 式 】 并 按钮 ， 在 菜单 中 渤 泽 【渐变 区 加 】 


步 又 09 ”在 弹出 的 对 话 框 中 ， 将 【不 透明 度 】 更 改 为 60%， 将 【渐变 】 更 改 为 日 色 到 日 色 和 再 到 日 色 ， 将 两 头 日 色色 标的 
【不 透明 度 】 更 改 为 0%， 完 成 乙 后 单 击 【确定 】 按 钮 ， 效 果 如 图 4.223 所 示 。 


图 4.222 Zh] EJE 


图 4.223 ”添加 渐变 


步骤 10 ”执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 莹 版】 命令 ， 为 当前 图 层 创建 筋 贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 4.224 所 示 。 
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图 4.224 ”创建 剪贴 蒙 版 


步骤 11 ”选择 工具 箱 中 的 【矩形 工具 】 恩 | ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 黑色 ，【 宽 度 】 更 改 为 1 
点 ， 绘 制 一 个 号 形 ， 此 时 将 生成 一 个 【起 形 2】 图 层 ， 如 图 4.225 所 示 。 


步骤 12， 在 【图 层 】 面 板 中 选中 【和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【矩形 2 拷贝 】 
图 层 ， 如 图 4.226 所 示 。 


图 4.225 ”绘制 矩形 


图 4.226 ”复制 图 层 
步骤 13 ”在 【图 层 】 面 板 中 选中 【矩形 2】 图 层 ， 单 击 面 板 底部 的 【添加 图 层 样 式 】 fÉ 按钮 ， 在 菜单 中 选择 【投影 】 命 令 。 


步骤 14 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 寺 加 】， 【颜色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%， 取 消 【 使 
用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 4.227 所 示 。 
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图 4.227 添加 【投影 】 参 数 


步骤 12 ”在 【和 矩形 2】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 人 在 【 息 形 2 拷贝 】 图 层 
名 称 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【粘贴 图 层 样式 】 命 令 ， 如 图 4.228 所 示 。 


图 4.228 拷贝 并 粘贴 图 层 样式 


步骤 16 ”选中 【 算 形 2 拷 贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 高 度 缩小 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 4.229 所 示 。 


步骤 17 ”双击 【起 形 2 拷贝 】 图 层 样 式 名 称 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 90 度 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 
如 图 4.230 所 示 。 


图 4.229 ”缩小 图 形 高 度 


图 4.230 ”设置 图 层 样 式 


步骤 18 选中 【矩形 2】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 筋 巾 家 版 】 命 令 ， 为 当前 图 层 创 建 剪 贴 莹 版， 隐藏 部 分 图 
形 ， 如 图 4.231 所 示 。 


图 4.231 “| HY Mk 2 yK 


4.8.2 制作 细 太 图像 


绘制 指示 灯 
绘制 双 脚 插 孔 


绘 刺 三 脚 岳 孔 


制作 插座 阴影 


细节 图 像 


步骤 01 选择 工具 箱 中 的 【椭圆 工具 】 碟 ， 在 选项 栏 中 将 【填充 】 更 改 为 深 灰色 (R: 0, G: 30, B: 30) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 4.232 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 正 圆 右 侧 位 置 按 住 Shift 键 绘制 一 个 矩形 ， 并 将 其 加 选 至 正 圆 中 ， 如 图 4.233 


图 4.232 


绘制 正 


图 4.233 ”绘制 矩形 


步骤 03 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 痉 按钮 ， 在 菜单 中 选择 【 描 边 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ，【 位 置 】 更 改 为 【内 部 】，【 填 充 类 型 】 更 改 为 【渐变 】，【 渐 变 】 更 改 为 日 
色 到 黄色 (R: 160, G: 150, B: 130) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.234 所 示 。 
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图 4.234 设置 【 描 边 】〗】 参 数 


步 骆 04 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 1 个 【椭圆 1 拷贝 】 
图 层 ， 如 图 4.235 所 示 。 


步骤 05 ”选中 【椭圆 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 
【水 平 翻 转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 将 图 形 向 右 侧 平移 ， 如 图 4.236 所 示 。 


图 4.236 ”变换 图 形 


提示 与 技巧 
由 于 插 孔 需要 与 圆 角 天 形 对 齐 ， 因 此 可 以 同时 将 长 顶 圆 1 拷贝 】 及 【 顶 圆 1】 图 层 编组 ， 再 将 其 与 【 圆 角 短 形 1】 对 齐 后 再 取 
消 编组 即 可 。 
步骤 06 ”选择 工具 箱 中 的 【椭圆 工具 】 总 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 两 个 插 孔 下 方位 置 
按 住 Shift 键 绘制 一 个 正 圆 图形 ， 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 4.237 所 示 。 
步骤 07 选中 【椭圆 2】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 六 按钮 ， 在 菜单 中 选择 【渐变 著 加 】 命 令 。 


步骤 08 在 弹出 的 对 话 框 中 将 【新 变 】 更 改 为 黄色 (R: 232, G: 229, B: 222) 到 黄色 (R: 200, G: 191, B: 


176) ， 完 成 之 后 蛙 击 【确定 】 按 钮 ， 效 果 如 图 4.238 所 示 。 


图 4.237 225] E [B] 


图 4.238 ”添加 渐变 


步骤 09， 选 择 工具 箱 中 的 【和 矩形 工具 】 Ë] ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 正 圆 位 置 绘制 一 个 
矩形 ， 此 时 将 生成 一 个 【矩形 3】 图 层 ， 如 图 4.239 所 示 。 


步骤 10 ”在 【椭圆 1】 图 层 名 称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 菜 蛙 中 选择 【拷贝 图 层 样式 】 命 令 ， 在 【和 矩形 3】 图 层 名 称 
上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【粘贴 图 层 样式 】 命 令 ， 如 图 4.240 所 示 。 


图 4.239 ”绘制 矩形 


图 4.240 ”粘贴 图 层 样 式 


步骤 11 选中 【 算 形 3】 图 层 ， 在 画布 中 按 住 Alt 键 拖 公 左下 角 位 置 将 其 复制 ， 生 成 一 个 【矩形 3 拷贝 】 图 层 ， 如 图 4.241 所 


人 河 \。 


步骤 12 ”选中 【和 窍 形 3 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 谷 令 ， 当 出 现 变 形 框 乙 后 ， 在 选项 栏 的 【旋转 】 
文本 框 中 输入 -30， 完 成 乙 后 按 Enter 键 确认 ， 如 图 4.242 所 示 。 


图 4.241 复制 图 形 


图 4.242 ”旋转 图 形 


步骤 13 ”选中 【和 矩形 3 拷贝 】 图 层 ， 按 住 Alt 键 拖 至 右 侧 相对 位 置 将 其 复制 ， 再 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 
平 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 4.243 所 示 。 


步骤 14 ”选择 工具 箱 中 的 【椭圆 工具 】 阐 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 0, G: 168, B: 255) ，【 描 边 】 更 
改 为 无 ， 在 面板 右上 角 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 3】 图 层 ， 如 图 4.244 所 示 。 


图 4.243 复制 图 形 


图 4.244 ”绘制 正 


步骤 15 “在 【图 层 】 面 板 中 选中 【椭圆 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 并 按钮 ， 在 菜单 中 选择 【和 斜 面 和 浮 
命 


As 
Xo 


步骤 16 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ,取消 【 使 用 全 局 光 】 复 选 框 ; 将 【高 度 】 更 改 为 60 度 ，【 高 光 模 式 】 
更 改 为 【 闭 加 】,，【 不 透明 度 】 更 改 为 100%，【 阴 影 模式 】 更 改 为 【 革 加 】，【 不 透明 度 】 更 改 为 100%， 如 图 4.245 所 示 。 


新 建 样式 (W)..。 | | 
[I Türa(v) 


mam m | 


[ra wa: ASA: 嗣位 为 昧 从 值 


图 4.245 ”设置 【斜面 和 浮雕】 参数 


步骤 17 选中 【外 友 光 】 复 选 框 ,将 【 瘟 合 模式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 青色 
(R: 0, G: 246, B: 255) ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 4.246 所 示 。 


38.26 
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图 4.246 ”设置 【外 发 光 】 参 数 


步骤 18 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 圆 角 和 矩 
形 ， 此 时 将 生成 一 个 【 圆 角 息 形 2】 图 层 ， 将 其 移 全 【背景 】 图 层 上 方 ， 如 图 4.247 所 示 。 


步骤 19 执行 菜单 栏 中 的 【 滤 镜 】| 【模糊 】| 【动感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 人 化】 按钮， 然后 在 弹出 的 对 
话 框 中 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 60 像 素 ， 设 置 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 4.248 所 示 。 


图 4.247 22 h] E] # £E3E 


图 4.248 ”添加 动感 模糊 


步骤 20 ”执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 像素， 完成 乙 后 单 击 【确定 】 按 钮 ， 这 样 融 完成 了 效果 的 制作 ， 如 图 4.249 所 示 。 


图 4.249 ”最 终 效 果 


第 5 章 ”立体 化 图 标 设 计 


本 章 介 绍 


本 章 讲解 立体 化 图 标 设计 ， 立 体 化 最 大 的 特点 是 超 强 的 视觉 冲击 力 ， 在 日 常生 活 中 总 会 看 到 有 的 图 形 不 是 平面 视觉 ， 而 是 给 
人 一 种 立体 的 感觉 ， 本 章 中 所 讲解 的 图 标 就 是 这 种 视觉 效果 ， 通 过 模拟 出 三 维 视角 ， 将 整个 图 标 以 一 种 真实 的 物体 形态 直观 展 


1 大 


示 ， 带 给 浏览 者 超 强 的 视觉 感受 。 通 过 对 本 章 内 容 的 学 习 可 以 掌握 立体 化 图 标的 设计 。 
要 后 索 3 引 

学 会 美味 水 果 图 标 制作 

学 习 制 作 美味 马 卡 龙 图 标 

. 学 会 制作 立体 通信 图 标 


了解 立 体 字 母 图 标 制 作 过 程 


5.1 


“学 会 制作 精致 游戏 图 标 
"学习 制作 均衡 器 图 标 


` 掌握 安全 应 用 图 标 制作 


美味 水 果 图 标 


设计 构思 
本 例 讲 解 制作 美味 水 果 图 标 ， 该 水 果 图 标 以 经 典 的 拟 物化 手法 打造 ， 整 体 效果 十 
. 难 易 指数 : 次 六 闪闪 次 
“ 素材 位 置 : 调用 素材 \ 第 5 章 \ 美 味 水 果 图 标 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 美 味 水 果 图 标 .psd 


- 视频 位 置 : 视频 教学 \5.1 美 味 水 果 图 标 .avi 


> 
分 


人/ 示 
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终 效果 如 图 5.1 所 示 。 


图 5.1 222 


以 绿色 作为 主 和 色调， 以 黄色 及 红色 作为 辅助 色 ， 表 现 出 很 真实 的 水 果 图 标 特征 。 


ES E-=— = 
绿色 (R:56,G:149,B:14) 黄色 (R:255,G:220,B:125) 红色 (R:210,G:53,B:220) 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 400 像 素 ，【 分 
汰 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 男 布 。 


步骤 02 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 5 草 \ 美 味 水 果 图 标 \ 边 框 .psd” 文 件 ， 单 击 【 打 开 】 
按钮 ， 将 打开 的 素材 抱 入 画布 中 ， 如 图 5.2 所 示 。 


图 5.2 ”添加 素材 


步骤 03 ”在 【图 层 】 面 板 中 选中 【边框 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按钮 ， 在 菜单 中 选择 【投影 】 命令 。 


步骤 04 ”在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 30%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 
更 改 为 6 像素 ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.3 所 示 。 
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步骤 05 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ， 
按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 5.4 所 示 。 


投影 
842 
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等 高 线 : y [ ] 3SRUR05 (L) 
3 (N): ¿Š 5 |% 
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| 设置 为 点 让 值 | | EiusymhA iË 


图 5.3 设置 【投影 】 参 数 
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| 取消 | 
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【 搞 边 】 更 改 为 无 ， 在 画布 靠 左 侧 位 置 
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图 5.4 绘制 图 形 


步骤 06 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【 描 边 】 命 


As 
Xo 


步 又 07 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 8 像素 ，【 位 置 】 更 改 为 【内 部 】，【 填 序 类 型 】 更 改 为 【渐变 】，【 渐 变 】 
更 改 为 黄色 (R: 246, G: 189, B: 118) 到 黄色 (R: 254, G: 235, B: 187) ，【 和 角度】 更 改 为 120 度 ， 如 图 5.5 所 示 。 


步骤 08 ”选中 【渐变 二 加 】 复 选 框 ,将 【渐变 】 更 改 为 黄色 (R: 255, G: 220, B: 125) 到 黄色 (R: 227, G: 
172, B: 71) ，【 样 式 】 更 改 为 【 径 向 】， 如 图 5.6 所 示 。 


结构 
fm: | 内 部 >| 
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图 5.5 设置 【 描 边 】 参 数 


图 5.6 JE [r k #joa ] 参数 


步骤 09 ”选中 【外 友 光 】 复 选 框 ,将 【 瘟 合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 35%，【 颜 色 】 更 改 为 深 绿色 
(R: 3, G: 25, B: 2) ，【 大 小 】 更 改 为 16 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.7 所 示 。 
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| 设置 为 默认 值 | | 撩 位 为 战 让 值 | 


图 5.7 设置 【外 发 光 】〗 参数 


步骤 10 ”执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 5 草 \ 美 味 水 果 图 标 \ 水 果 .psd” 文 件 ， 单 击 【 打 开 】 
按钮 ， 将 打开 的 素材 拖 入 画布 中 图 标 位 置 并 适当 缩小 ， 如 图 5.8 所 示 。 


步骤 11 在 【图 层 】 面 板 中 选中 【水 果 】 图 层 ， 单 击 面板 询 部 的 【添加 图 层 样式 】 关 按钮， 在 菜单 中 选择 【投影 】 命令。 
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步骤 12 在 弹出 的 对 话 框 中 将 【 竟 合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 40%， 取 消 【 使 
用 全 局 光 】 复 选 框 ;将 【角度 】 更 改 为 100 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 这 
样 束 完 成 了 效果 的 制作 ， 如 图 5.9 所 示 。 


图 5.8 添加 素材 


图 5.9 ”最 终 效果 


5.2 ”美味 马 卡 万 图 标 


设计 构思 


本 例 讲 解 制 作 美味 马 卡 龙 图 标 ， 该 图 标 以 马 卡 龙 饼 干 为 基础 利用 拟 物 化 的 手法 制作 出 形 象 的 信息 图 标 ， 整体 效果 相 P: 
色 ， 最 终 效 果 如 图 5.10 所 示 。 


. 难 易 指数 : kky 
案例 位 置 : 源 文件 \ 第 5 齐 \ 美 味 马 卡 龙 图 标 .psd 


-视频 位 置 : 视频 教学 \5.2 美 味 马 卡 龙 图 标 .avi 


图 5.10 最终 效果 


底层 夹心 上 层 信息 图 示 


色彩 分 析 


主 色 调 为 浅 红色 ， 表 现 出 暖色 调 特 点 ， 以 白色 作为 辅助 色 ， 将 浅 红色 饼干 及 白色 夹心 表现 的 十 分 真实 。 


5.21 纵 制 主 轮 万 


制作 上 层 


制作 夹心 
一 制作 底层 


饼干 效果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
立 率 】 为 72 像 素 /英寸 ， 新 建 一 个 空 日 画布 ， 将 国 布 填充 为 黄色 (R: 245, G: 240, B: 214) 。 


步骤 02， 选 择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 红色 (R: 226, G: 164, B: 175) , D 
边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 5.11 所 示 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 三 个 拷贝 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【上 层 】、【 夹 心 】 及 【底层 】， 如 图 5.12 所 示 。 


图 5.11 


绘制 正 


100%| ~ 


图 5.12 复制 图 层 


步骤 04 选中 【夹心 】 图 层 ， 将 图 形 【 填 宛 】 更 改 为 日 色 ; 再 选中 【底层 】 图 层 ， 将 图 形 向 下 移动 并 适当 缩小 ， 如 图 5.13 
所 示 。 


图 5.13 ”变换 图 形 


步骤 05 ”选中 【上 层 】 图 层 ， 将 图 形 【 填 充 】 更 改 为 浅 红 色 (R: 240, G: 180, B: 187) ， 再 将 其 高 度 稍 微缩 小 并 向 上 
移动 ， 如 图 5.14 所 示 。 


图 5.14 ”变换 图 形 


步骤 06 在 【图 层 】 面 板 中 选中 【底层 】 图 层 ， 单 击 面 板 底部 的 【添加 图 层 样 式 】 fx qn, 在 菜单 中 选择 【投影 】 命 令 。 


步骤 07 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 颜 色 】 更 改 为 深 红色 (R: 48, G: 30, B: 32) , [Jë 


明度 】 更 改 为 20%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 12 像 素 ， 完 
成 之 后 单 击 【确定 】 按 钮 ， 如 图 3.15 所 示 。 
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图 5.15 设置 【投影 】 参 数 


步骤 08 “在 【图 层 】 面 板 中 选中 【上 层 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 瘟 按 钮 ， 在 菜单 中 选择 【介面 和 浮 肉 】 


步骤 09 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 10 像 素 ，【 软 化 】 更 改 为 16 像 素 ， 


【高 光 模 式 】 中 的 【不 黎明 度 】 更 改 为 
60%, 


【阴影 模式 】 中 的 【不 透明 度 】 更 改 为 10%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.16 所 示 。 


步骤 10 ” 单 击 【 图 层 】 面 板 底 部 的 【创建 新 图 层 】 轩 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 将 其 填充 为 白色 。 
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图 5.16 设置 【斜面 和 浮雕 〗 参 数 


步骤 11 执行 菜单 柱 中 的 【 渡 镜 】|【 杂 色 】| 【添加 杂 色 】 命 令 ， 在 弹出 的 对 话 框 中 分 别 选中 【高 
色 】 复 选 框 , 将 【数量 】 更 改 为 3%， 完 成 之 后 日 击 【 确 定 】 按 钮 ， 如 图 5.17 所 示 。 
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图 5.17 设置 【添加 杂 色 】〗 参数 及 效果 


斯 分 布 】 单 选 按钮 及 【 单 


步骤 12 ”执行 荣 单 栏 中 的 【 滤 镜 】|【 模 糊 】| 【高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 5.18 所 示 。 


步骤 13 ”选中 【图 层 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【正片 芍 底 】， 如 图 5.19 所 示 。 


图 5.18 ”添加 高 斯 模糊 


图 5.19 ”设置 图 层 混 合 模式 


步骤 14 选中 【图 层 1】 图 层 ， 执 行 菜 单 栏 中 的 【图 层 】| 【创建 筋 贴 租 版】 命令， 为 当 责 图 层 创 建 筋 贴 莹 上 唉 ， 隐 藏 部 分 图 
像 ， 如 图 5.20 所 示 。 
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图 5.20 ”创建 剪贴 蒙 版 


5.2.2 ”绘制 对 十 图 形 


处 理 小 孔 图 像 
绘制 对 证 图 形 


对 话 图 形 


步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 图 标 中 间 位 置 绘制 
一 个 椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 ?.21 所 示 。 


+ 
步骤 02 ”选择 工具 箱 中 的 【添加 销 点 工具 】 2 ， 在 椭圆 图 形 左下 角 单 击 添加 两 个 销 点 ， 如 图 5.22 所 示 。 


选择 工具 箱 中 的 【直接 选择 工具 】 Ë ， 拖 动 中 间 锚 点 ， 将 图 形变 形 ， 如 图 5.23 所 示 。 
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图 5.21 绘制 椭 


图 5.22 > 
添加 锚 点 


图 5.23 ”将 图 形变 形 


步骤 04， 选 择 工具 箱 中 的 【椭圆 工具 】 € ， 在 图 形 位 置 按 住 Alt 键 绘制 一 个 正 贺 ， 将 部 分 图 形 减 去 ， 如 图 5.24 所 示 ，。 


步骤 05 ”选择 工具 箱 中 的 【路 径 选择 工具 】 矢 ， 选 中 路 径 ， 向 右 侧 平移 复制 两 份 ， 如 图 5.25 所 示 。 


图 5.24 ” 减 去 图 形 


图 5.25 复制 路 径 


步骤 06 ”选中 【椭圆 1】 图 层 , 将 其 复制 一 份 ， 然 后 选中 【椭圆 1】 图 层 ， 将 图 形 【 填 充 】 更 改 为 黑色 ， 并 设置 其 图 层 混 合 
模式 为 【 芭 加 】， 表 将 其 向 下 稍微 移动 ， 这 样式 完成 了 效果 的 制作 ， 如 图 5.26 所 示 。 


图 5.26 最终 效果 


5.3 ”立体 通信 和 图标 


设计 构思 


本 例 讲解 制作 立体 通信 图 标 ， 该 图 标 制作 比较 简单 ， 首 先 绘制 出 两 个 有 厚度 质感 图 形 ， 然 后 绘制 通信 标识 图 形 即 可 完成 整个 
图 标 的 制 作 5 最 终 效 果 如 图 5.27 所 示 。 


. 难 易 指数 : kk Yc 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 立 体 通信 图 标 .psd 


` 视频 位 置 : 视频 教学 \5.3 立 体 通信 图 标 .avi 


图 5.27 最 终 效 果 


底座 通信 标识 
主体 色 为 深蓝 色 ， 以 浅 蓝 色 作 为 辅助 色 ， 整 体 色 调 呈 现 出 很 强 的 科技 感 。 
EE 
深蓝 色 (R:8,G:91,B:169) 浅 蓝 色 (R:163,G:202,B:235) 


5.3.1 ”制作 主体 轮 万 


轮廓 图 像 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 00 像素 ，【 高 度 】 为 380 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 十 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 蓝 色 (R: 148, G: 206, B: 238) 到 监 色 (R: 50, G: 100, B: 
138) 的 径 同 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 算 形 工具 】 e frilrhi$s DBE2Zs] SEPKJE66, [aD] sErX7J2s, [MÉ4€] SEPXS 
40 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 1】 图 层 ， 如 图 ?.28 所 示 。 


步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 nt, 复制 两 个 拷贝 图 
E, 分别 将 图 层 名 称 更 改 为 【上 万 】、【 底 部 厚度 】 及 【底部 】， 如 图 5.29 所 示 。 


图 5.28 Z] # jE[í 


图 5.29 复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【底部 厚度 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 羡 按钮 ， 在 菜单 中 选择 【渐变 量 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 赣 色 (R: 163, G: 202, B: 235) 到 浅 蓝 色 (R: 219, G: 233, B: 
242) ， 【角度 】 更 改 为 0， 如 图 5.30 所 示 。 


步骤 05 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 60%， 取 消 
【使 用 全 局 光 】 复 选 框 ;将 【和 角度】 更改 为 90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ,完成 之 后 蛙 击 【确定 】 按 
钮 ， 如 图 5.31 所 示 。 
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图 5.31 设置 【投影 】 参 数 


步骤 06 ”选中 【底部 厚度 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 高 度 缩小 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 5.32 所 示 。 


图 5.32 ”缩小 高 度 


步骤 07 ”在 【 质 部 厚度 】 图 层 名 称 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 在 【底部 】 图 层 名 
称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 荣 单 中 选择 【粘贴 图 层 样 式 】 命 令 ， 如 图 5.33 所 示 。 
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图 5.33 ”拷贝 并 粘贴 图 层 样 式 


步骤 08 Xh [JSëB] EdEEFFruS4FR, (rsirHRJxXJusiErhusrh [ñrz>=e)l] ZusfE, jS [Wh22] SErXJus 55, 


步骤 09 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正片 革 底 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 30%， 
取消 【使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【 确 定 】 
按钮 ， 效 果 如 图 5.34 所 示 。 


步骤 10 ”选中 【上 方 】 图 层 , 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 高 度 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 
图 5.35 所 示 。 


图 5.34 设置 图 层 样 式 


图 5.35 ”缩小 图 形 


步骤 11 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| EZ ”上 胺 钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 圆 角 和 矩形 底部 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 
6 所 示 ， 


步骤 12 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 . 

步骤 13” 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 命 令 ， 完 成 
之 后 按 Enter 键 确认 ， 再 向 右 侧 平移 ， 如 图 5.37 所 示 。 


步骤 14 同时 选中 【形状 1】 及 【形状 1 拷贝 】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 将 生成 的 图 层 名 称 更 改 为 【上 方 】， 如 图 
5.38 所 示 。 


图 5.36 ”绘制 图 形 


图 5.37 复制 并 变换 图 形 


步骤 15 ”在 【图 层 】 面 板 中 选中 【上 方 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 ln. 复制 一 个 【上 方 拷贝 】 图 
层 ， 将 图 层 名 称 更 改 为 【上 万 厚度 】， 如 图 5.39 所 示 。 


EN 


图 5.39 复制 图 层 


步骤 16 在 【图 层 】 面 板 中 选中 【上 方 厚度 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 _ 按钮 ， 在 菜单 中 选择 【渐变 又 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 8, G: 91, B: 169) 到 浅 蓝 色 (R: 22, G: 123, B: 232) ， 如 图 
5.40 所 示 。 
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图 5.40 j [ər F £p] 参数 


步骤 17 ”选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 赦 加 】，【 颜 色 】 更 改 为 日 多 ，【 不 透明 硫 】 更 改 为 80%，【 距 
离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.41 所 示 。 
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图 5.41 设置 【投影 】 参 数 


步骤 18 ”选中 【上 万 厚 度 】 图 层 ,， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 高 度 缩小 ， 表 将 宽度 同 内 部 缩小 1 ~ 
2 像素 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 5.42 所 示 。 


图 5.42 ”缩小 图 形 


步骤 19 在 【上 方 厚度 】 图 层 名 称 上 单 击 鼠标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 在 【上 方 】 图 层 名 
称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 荣 单 中 选择 【粘贴 图 层 样 式 】 命 令 ， 如 图 ?5.43 所 示 。 


图 5.43 ”拷贝 并 粘贴 图 层 样式 


步骤 20 ”双击 【上 方 】 图 层 样 式 名 称 ， 在 弹出 的 对 话 框 中 选中 【 淆 变革 加 】 复 选 框 ,将 【 淘 变 】 更 改 为 蓝 色 系 ，【 和 角度】 
更 改 为 0。 


步骤 21 选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正片 蔷 底 】，【 颜 色 】 更 改 为 深蓝 色 (R: 8, G: 37, B: 65) , 
【不 透明 度 】 更 改 为 45%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 5.44 所 示 。 


图 5.44 设置 图 层 样式 


5.3.2 ”制作 标志 


制作 标记 
a JJI ËJ SZ 23 SE 


标志 图 像 


步骤 01 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】[ 只 和 ”按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 ]， 将 【填充 】 更改 为 白色 ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 起 膀 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 5.45 所 示 ， 


图 5.45 ”绘制 图 形 


步骤 02 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Besan, 在 荣 单 中 选择 【和 斜面 和 浮 


BE] 65. 


步骤 03 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ，【 高 光 模 式 】 中 的 【不 透明 度 】 更 改 为 60%，【 阴 影 模式 】 更 改 为 
【日 色 】，【 不 透明 度 】 更 改 为 60%， 如 图 5.46 所 示 。 
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图 5.46 JE [80 46 AE] £ 


步骤 04 ”选中 【渐变 蔷 加 】 复 选 框 , 将 【渐变 】 更 改 为 蓝 色 (R: 197, G: 229, B: 248) 到 花色 (R: 144, G: 


208, B: 247) ， 如 图 5.47 所 示 。 


š 


DID ix 


图 5.47 20 [št E ep] 参数 


步骤 05 ”选中 【投影 】 复 选 框 ,将 【不 透明 度 】 更 改 为 45%， 将 【角度 】 更 改 为 115 度 ，【 距 离 】 更 改 为 7 像素 ，【 大 小 】 
更 改 为 10 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.48 所 示 。 


图 5.48 设置 【投影 参数 


步骤 06， 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 ， 如 图 5.49 所 示 ， 


步骤 07 ”选择 工具 箱 中 的 【直接 选择 工具 】 h. 拖 动 【形状 1 拷贝 】 图 层 中 右上 角 销 点 ， 将 其 稍微 变形 ， 如 图 5.50 所 示 。 


图 5.49 ”旋转 图 形 


图 5.50 41549 S. 


步骤 08 ”双击 【投影 】 复 选 框 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 77 度 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 束 完成 了 效 
果 的 制作 ， 如 图 5.51 所 示 。 


图 5.51 最终 效果 


54 立体 字母 图 标 


设计 构思 


本 例 讲 解 制作 立体 字母 图 标 ， 此 款 图 标 以 字母 为 主 视觉 ， 通 过 制作 立体 底座 ， 将 字母 信息 直观 地 表现 出 来 ， 整 体 的 制作 过 程 
比较 简单 ， 注 意图 层 样 式 的 灵活 使 用 ， 最 终 效果 如 图 5.52 所 示 。 


. 难 易 指数 : kky yc < 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 立 体 字 母 图 标 .psd 


. 视频 位 置 : 视频 教学 \5.4 立 体 字 母 图 标 .avi 


图 5.52 ”最终 效果 


重点 分 解 
JS FE 字母 
色彩 分 析 


主体 色 为 神秘 紫色 调 ， 以 浅 紫 色 作 为 辅助 色 ， 整 体 色 调 呈 现 出 很 强 的 科技 感 。 


紫色 (R:186,G:52,B:130) 浅 紫 色 (R:224 G:214 .B:220) 


5.4.1 ”制作 主体 轮 万 


制作 立体 质感 kus 


轮廓 图 像 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 深蓝 色 (R: 60, G: 74, B: 92) 到 深蓝 色 (R: 40, G: 47, B: 
60) 的 径 同 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 圈 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
40 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 矩形， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 屋 ， 如 图 5.53 所 示 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 两 个 拷贝 图 
层 ， 分 别 将 图 层 名 称 更 改 为 【上 方 】 和 【下 方 】， 如 图 5.54 所 示 。 


图 5.53 ”绘制 圆 角 和 珑 形 


图 5.54 复制 图 层 


步骤 04 在 【图 层 】 面 板 中 选中 【下 方 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx gan, 在 菜单 中 选择 【渐变 蔷 加 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 系 渐变 ，【 和 角度 】 更 改 为 0， 如 图 5.55 所 示 。 
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图 5.55 设置 【渐变 登 如 】 参数 
提示 与 技巧 


此 处 的 渐变 可 以 大 致 设置 为 如 下 颜色 。 


步骤 05 ”选中 【投影 】 复 选 框 , 将 【颜色 】 更 改 为 深蓝 色 (R: 8, G: 37, B: 65) ，【 不 透明 度 】 更 改 为 40%， 取 消 【 使 
用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 7 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 
图 5.56 所 示 。 


步骤 06 
图 5.57 所 示 。 


图 5.56 设置 【投影 参数 


选中 【上 方 】 图 层 ， 按 C 合 
， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 高 度 缩 /| 
/ 高 度 缩小 ， 完 成 之 后 按 Enter 键 确认 


如 


图 5.57 21 J] 


步骤 07 在 【下 万】 图 层 名 称 上 蛙 击 昭 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 命 令 ,， 在 【上 万 】 图 层 名 称 上 
单 击 女 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 粘 贴 图 层 样 式 】 命 令 ， 如 图 5.58 所 示 。 


步骤 08 双击 【上 方 】 图 层 样 式 名 称 ， 在 弹出 的 对 话 框 中 选中 【渐变 妓 加 】 复 选 枉 ， 将 【渐变 】 更 改 为 浅 竺 色 (R: 
224，G: 214，B: 220) 到 浅 灰 色 (R: 253，G: 253，B: 253) 。 


步骤 09 选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 堵 加 】， 【颜色 】 更 改 为 昌 色 ，【 不 透明 度 】 更 改 为 100%，【 距 
离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 0 像素 ,效果 如 图 5.59 所 示 。 


图 5.58 ”粘贴 图 层 样 式 


图 5.59 设置 图 层 样 式 


5.4.2 ”处 理子 母 效 果 
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处 理 字母 质感 


字母 效果 


步骤 01 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 添 加 文字 (Arial Bold bold) ， 如 图 5.60 所 示 。 


图 5.60 ”添加 文字 


步骤 02 在 【图 层 】 面 板 中 选中 【B】 图 层 ， 单 击 面板 床 部 的 【添加 图 层 样式 】 羔 按钮 ， 在 菜单 中 选择 【渐变 三 加 】 @ 


步骤 03 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 (R: 186, G: 52, B: 130) 到 紫色 (R: 128, G: 11, B: 80) ， 如 
图 5.61 所 示 。 
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图 5.61 jk 2 [ər F £p] 参数 


步骤 04 ”选中 【内 友 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 50%， 【颜色 】 更 改 为 紫色 (R: 
80, G: 8, B: 50) ，【 大 小 】 更 改 为 10 像 素 ， 如 图 5.62 所 示 。 


图 5.62 设置 【内 发 光 】〗 参数 


步骤 05 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 蔷 加 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 距 
离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 5.63 所 示 。 


图 5.03 ”最 终 效 果 


5.5 ”健康 应 用 图 标 


设计 构思 


本 例 讲解 绘制 健康 应 用 图 标 ， 该 图 标 以 简约 的 立体 图 形 与 图 示 相 结合 ， 整 体 表 现 出 很 强 的 健康 特征 ， 最 终 效 果 如 图 5.64 所 


. 难 易 指数 : kk vc yx 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 健 康 应 用 图 标 .psd 


“ 视频 位 置 : 视频 教学 \5.5 健 康 应 用 图 标 .avi 


图 5.64 最终 效果 


重点 分 解 
底座 健康 图 示 
色彩 分 析 


主 色 调 为 健康 绿色 ， 以 浅 绿 和 和 白色 作为 辅助 色 ， 整 体 顾 色相 辅 相 承 。 


wr 
深 绿 色 (R:31,G:153,B:216) 


RE 
浅 绿色 (R:28 G:196,B:182) 


5.5.1 绘制 轮 万 


制作 厚度 质感 


主 轮廓 效 果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 900 像素 ，【 高 度 】 为 380 像 素 ，【 分 
状 率 】 为 72 像 素 / 英 斗 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
40 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 ?.65 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷 贝 】 图 层 ， 如 图 5.66 所 示 . 


图 5.65 2#JE] £ £E3 


图 5.66 ”复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疼 按 钮 ， 在 菜单 中 选择 【渐变 释 


加 】 命 令 。 


步骤 05 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 系 渐变 ，【 和 角度】 更 改 为 0， 如 图 5.67 所 示 。 
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图 5.67 2EXE [ər F #jo] 参数 
提示 与 技巧 


此 处 的 绿色 系 渐 变 大 致 可 设置 为 以 下 颜色 。 


步骤 06 选中 【投影 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深 绿色 (R: 4, G: 57, B: 55) ，【 不 
透明 度 】 更 改 为 90%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 3 像素 ， 
完成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.68 所 示 。 


图 5.68 设置 【投影 参数 


步骤 07 选中 【 圆 角 算 形 1 拷 贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 高 度 缩小 ， 完 成 之 后 按 Enter 
键 确认 ， 如 图 5.69 所 示 。 


图 5.69 ”缩小 高 度 


步骤 08 在 【图 层 】 面 板 中 选中 【 圆 角 窍 形 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 荣 单 中 选择 【 淹 


变 杰 加 】 命 令 。 


步骤 09 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 (R: O, G: 143, B: 135) 到 绿色 (R: 7, G: 187, B: 172) ，【 角 
度 】 更 改 为 90 度 ， 如 图 5.70 所 示 。 
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图 5.70 jJ XE [# F #joa] 参数 
步骤 10 ”选中 【内 阴影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【里 加】，【 颜 色 】 更 改 为 折 色 ，【 不 透明度 】 更 改 为 60%， 取 
消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 -90 度 ，【 距 离 】 更改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.71 所 示 。 
提示 与 技巧 


先 设置 渐变 二 加 的 目的 是 ， 在 设置 内 阴影 时 更 方便 观察 实际 的 图 层 样式 效果 。 


AiREiE(0:, —— | x 
角度 (A}: (1) 度 “[] 使 用 全 局 光 1G) 
sp, —=— = 
gr —=àP— J x 
(s; —==— 2 

品质 | 


短语 绕 : y (_] SRR8B¿5S (L) 


| 复位 为 中 认 值 


图 5.71 设置 【内 阴影 】 参数 


5.5.2 ”绘制 健康 图 示 


绘制 绿叶 图 形 
制作 图 形 质 感 


图 示 效 果 


步骤 01 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 日 色 ，【 摘 边 】 更 改 为 无 ， 绘 制 一 个 树叶 形状 的 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 2?.72 所 示 。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 羡 按 钮 ， 在 菜单 中 选择 【斜面 和 浮雕 】 
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步骤 03 ”在 弹出 的 对 话 框 中 将 【样式 】 更 改 为 【 枕 状 浮雕 】，【 大 小 】 更 改 为 1 像素 ，【 马 沧 异 式 】 更 改 为 【 寺 加 】，【 颜 
色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 久 ?0%，【 阴 影 模 式 】 中 的 【不 透明 硫 】 更 改 为 20%， 这 样 残 完 成 了 效果 的 制作 ， 如 图 >.73 
所 示 。 


图 5.72” 绘制 图 形 


图 5.73 最终 效果 


56 ”精致 池 戏 图 标 


设计 构思 


本 例 讲解 绘制 精致 游戏 图 标 ， 此 款 图 标 以 真实 的 游戏 手柄 为 参考 ， 通 过 成 熟 的 拟 物 化 手法 绘制 出 很 强 的 可 视 化 图 标 ， 最 终 效 
果 如 图 5.74 所 示 ° 


` 难 易 指 数 : kk y< Yc 


. 案例 位 置 : 源 文件 \ 第 5 章 \ 精 致 游戏 图 标 .psd 


. 视频 位 置 : 视频 教学 \5.6 精 致 游戏 图 标 .avi 


图 5.74 最终 效果 


重点 分 解 
- 
底座 游戏 手柄 
色彩 分 析 


主 色 调 为 紫色 ， 以 槛 色 和 绿色 作为 辅助 色 ， 在 突出 图 标 色 彩 的 同时 点 明了 游戏 性 。 


u T TU 
紫色 (R:160,G:27,B:96) 18 (R:217,G:70,B:0) 绿色 (R:63,G:136,B:10) 


5.6.1 ”制作 主 轮 局 


绘制 手 棉 轮 万 


绘制 图 标 轮 启 


轮廓 图 像 


操作 步 又 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 450 像 素 ，【 高 度 】 为 350 像 素 ，【 分 
状 率 】 为 72 像 素 / 天 十， 新 建 一 个 空 日 画布 。 


步 又 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
60 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 ?.75 所 示 。 


图 5.75 2#JE] # £E3 


在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 在 按钮 ， 在 菜单 中 选择 【渐变 赫 


加 】 命 令 。 


在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 紫色 (R: 160, G: 27, B: 96) 到 紫色 (R: 217, G: 46, B: 134) ， 
【角度 】 更 改 为 90 度 ， 如 图 5.76 所 示 。 


图 5.76 EE [ər r 5 ja] 参数 


步骤 05 jer [SSHBHIDZBE] SHE, $ [AJ] SEpV7J2&ss, [njy6bSz,] SEr22J [Ë@)l] , 【不 延明 度 】 更 改 为 
80%，【 阴 影 模式 】 更 改 为 【 赦 加 】，【 不 透明 度 】 更 改 为 55%，【 颜 色 】 更 改 为 白色 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.77 
所 示 。 
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图 5.77 设置 【斜面 和 浮雕 〗】 参 数 


步骤 06， 选 择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 


60 像 素 ， 绘 制 一 个 圆 角 矩形， 


此 时 将 生成 一 个 【 圆 角 和 矩 形 2】 图 层 ， 如 图 5.78 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【钢笔 工具 】 上 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路 径 ”外 按 乌 ， 在 弹出 的 选项 中 选择 


【形状 】， 
5.79 所 示 。 


将 【填充 】 更 改 为 日 色 ， 


【 搞 边 】 更 改 为 无 ， 在 圆 角 起 形 左 下 角 绘 制 一 个 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 


图 5.78 2 E] # £E3É 


图 5.79 ”绘制 图 形 


步骤 08 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 ES 复制 一 个 【形状 1 拷贝 】 
图 层 ， 如 图 5.80 所 示 。 


步骤 09 选中 【形状 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 
【水 平 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 将 其 移动 到 右 侧 合 适 的 位 置 ， 同 时 选中 【形状 1 拷贝 】 及 【形状 1】 图 层 ， 按 
Ctrl+E 组 合 键 将 其 合并 ， 将 生成 的 图 层 名 称 更 改 为 【手柄 】， 如 图 5.81 所 示 。 


图 5.80 复制 图 形 


lI 


图 5.81 合并 图 层 


步骤 10 在 【图 层 】 面 板 中 选中 【手柄 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【斜面 和 浮雕 】 
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步骤 11 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 18 像 素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 高 光 模 
式 】 中 的 【不 透明 度 】 更 改 为 80%， 【阴影 模式 】 中 的 【不 透明 度 】 更 改 为 20%， 如 图 5.82 所 示 。 
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204) 到 灰色 (R: 243, G: 
步骤 12 ”选中 【渐变 友 加 】 复 选 框 ， 将 【渐变 】 更 改 为 灰色 (R: 204, G: 204, B: 

jk | xz "= 

243, B: 243) ， 如 图 5.83 所 示 。 


图 5.83 JEE [ər r 5 ja] 参数 


步骤 13 选中 【投影 】 复 选 醋 ， 将 【混合 模式 】 更 改 为 【 赦 加 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 硫 】 更 改 为 60%， 取 消 
【使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 5 像素， 完成 之 后 单 击 【确定 】 按 
钮 ， 如 图 5.84 所 示 。 
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图 5.84 设置 【投影 】 参 数 


5.6.2 ”制作 手柄 图 像 


制作 于 柄 按键 


N S9]|! H: Te 效果 


手柄 图 像 


步骤 01 选择 工具 箱 中 的 【 李 圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 手柄 左上 角 位 置 按 
住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 5.85 所 示 。 


步骤 02 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 岂 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 】 
图 层 ， 如 图 5.86 所 示 。 


图 5.85 225] E 3 


图 5.86 ”复制 图 层 


步骤 03 ”选中 【椭圆 1】 图 层 ， 执行 菜 单 栏 中 的 【 渡 镜 】| 【模糊 】| 【局 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 1 
按钮 ， 然 后 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 和 确定】 按钮， 如 图 2.87 所 示 。 


步骤 04 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 菜单 中 选择 【渐变 堵 加 1 
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步骤 05? ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 207, G: 207, B: 207) 到 灰色 (R: 243, G: 243, B: 
243) ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.88 所 示 。 


图 5.87 “添加 高 斯 模糊 


图 5.88 添加 渐变 


步骤 06 ”选中 【椭圆 1 拷贝 】 图 层 ， 将 图 形 【 填 充 】 更 改 为 黑色 ; 再 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 等 
比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 5.89 所 示 。 


步骤 07 


加 】 命 令 。 


步骤 08 
52.90 所 泵 。 


图 5.89 ”填充 并 变换 图 形 


在 【图 层 】 面 板 中 选中 【椭圆 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 在 校外， 在 菜单 中 选择 【渐变 蔷 


在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 楼 色 (R: 217, G: 70, B: 0) 到 黄色 (R: 255, G: 162, B: 69) ， 如 图 


图 5.90 JE [ər 3 5ja] 参数 


步骤 09 选中 【外 上 友 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】， [J-S58BBEZ] SE2R2J100%, [ÉR@,] SEUK7JRIS 5 
(R: 152, G: 63, B: 17) ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.91 所 示 。 
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图 5.91 设置 【外 发 光 】 参 数 


步骤 10 ”同时 选中 【椭圆 1 拷贝 】 及 【椭圆 1】 图 层 ， 按 住 Alt 键 向 右 下 角 拖 动 复 制图 形 ， 此 时 将 生成 两 个 【椭圆 1 拷贝 2】 
层 ， 如 图 5.92 所 示 。 


步骤 11 双击 上 方 的 【椭圆 1 拷贝 2】 图 层 样 式 名 称 ， 在 弹出 的 对 话 框 中 选中 【渐变 苇 加 】 复 选 框 ,将 【渐变 】 更 改 为 绿色 
(R: 63, G: 136, B: 10) 到 绿色 (R: 139, G: 237, B: 33) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 5.93 所 示 。 


图 5.92 复制 图 形 


图 5.93 ”更 改 渐 变 颜 色 


步骤 12 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
3 像素 ， 在 手柄 右 侧 绘制 一 个 圆 角 和 窟 形 ， 此 时 将 生成 一 个 【 贺 角 起 形 2】 图 层 ， 如 图 ?.94 所 示 。 


步骤 13 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 民 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 2 拷 贝 】 图 层 ， 将 【 圆 角 窍 形 2 拷贝 】 顺 时 针 旋转 90 度 。 同 时 选中 【 圆 角 窍 形 2】 及 【 圆 角 窍 形 2 搁 贝 】 图 层 ， 按 Ctrl+E 组 合 键 
将 其 合并 ， 将 生成 的 图 层 名 称 更 改 为 【万 同 按钮 】， 如 图 5.95 所 示 。 


图 5.94 2#JE] # £E3 


图 5.95 ”复制 图 层 


步骤 14 在 【图 层 】 面 板 中 选中 【方向 按钮 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 kk 按钮 ， 在 菜单 中 选择 【渐变 堵 


加 】 命 令 。 


步骤 1? 在 弹出 的 对 话 框 中 将 【新 变 】 更 改 为 灰色 (R: 213, G: 208, B: 214) 到 灰色 (R: 250, G: 248, B: 
249) ，【 角 度 】 更 改 为 55 度 ， 如 图 5.96 所 示 。 


步骤 16 ”选中 【 冬 面 和 浮雕 】 复 选 框 ,将 【万 法 】 更 改 为 【 圣 刻 清晰 】，【 大 小 】 更 改 为 1 像素 ，【 高 光 模 式 】 中 的 【不 透 
明度 】 更 改 为 80%，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 30%， 如 图 5.97 所 示 。 


 3H2EE80HI 
3 


mem: ie | be 
Tas, —— h 
[| DEm09 品 预览 (V) 
样式 : [it C ”| Z SEE (D 
BE (N): (bs Jm [ 要 对 齐 | 


说 证 为 时 从 值 算 位 汶 昧 认 值 | 


图 5.96 j E [šf F #ja] 参数 


MHBEPHISBII 
2451] 


尝 度 (D}: p—ÀarÑ] s s sl] sHu$/i5ss*z2ZZz>£gitnGss 
Jqsl: @) F QO T 
zh === , |z 
gu Fk ——=— wx 
E: 


REO: — po | 度 
| ° | L] 使 用 全 局 光 (6) 


sm: [m ]m 
wssma Á | mm 
高 光 模 式 ,: | 
358BBFE (0): la0 w 
88: | nsn 。 | T 
(CO): —w a |% 
| WB | | 页 位 为 ai 人 值 | 


可 预览 [W 


图 5.97 设置 【斜面 和 浮雕 〗 参 数 


步骤 17 选中 【外 友 光 】 复 选 框 ,将 【 竟 合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 50%，【 颜 色 】 更 改 为 黑色 ， 
【大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.98 所 示 。 
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图 5.98 设置 【外 发 光 】 参 数 


步骤 18 ”选择 工具 箱 中 的 【椭圆 工具 】 鲁 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 按钮 中 间 位 置 按 住 
Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 5.99 所 示 。 


步骤 19 在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 菜单 中 选择 【渐变 堵 加 1 
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步骤 20 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 砍 色 (R: 213, G: 212, B: 213) 到 日 色 ，【 角 度 】 更 改 为 55 度 ， 完 成 之 
后 单 击 【确定 】 按 钮 ， 这 样 残 完成 了 效果 的 制作 ， 如 图 ?.100 所 示 。 


图 5.99 ”绘制 正 


图 5.100 最终 效果 


5.7” 揪 杆 立体 图 标 


设计 构思 


本 例 讲 解 制作 摇 杆 立体 图 标 ， 此 款 图 标 以 银色 质感 为 主 视 党 ， 将 摇 杆 图 像 制 作成 蓝 紫 渐变 ， 整 体感 很 强 ， 同 时 具有 十 分 明显 
的 数码 科技 特征 ， 最 终 效果 如 图 5.101 所 示 。 


. 难 易 指数 : kk Yc Ye Yk 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 摇 杆 立 体 图 标 .psd 


` 视频 位 置 : 视频 教学 \5.7 摇 杆 立 体 图 标 .avi 


图 5.101 最 终 效 果 


重点 分 解 


色彩 分 析 


主 色 调 为 灰色 ， 以 青色 作为 辅助 色 ， 灰 色 表 现 出 摇 杆 的 质感 ， 而 青色 则 体现 出 很 强 的 科技 感 。 


| 
灰色 (R:213,G:213,B:213) 青色 (R:36,G:216,B:250) 


5.7.1 绘制 图 标 轮 局 


二 一 一 外 轮 廊 


内 部 轮廓 


图 标 轮 廊 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
汰 率 】 为 72 像 素 / 英 十 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 灰色 (R: 248, G: 248, B: 248) 到 灰色 (R: 163, G: 170, B: 
183) 的 径 同 渐变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 (R: 22, G: 30, B: 40) ，【 描 边 】 
更 改 为 无 ，【 半 径 】 更 改 为 40 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 贺 角 起 形 1】 图 层 ， 如 图 ?.102 所 示 。 
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步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 窍 形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 六 按钮 在 菜单 中 选择 【渐变 老 
加 】 命 令 。 


步骤 04 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 213, G: 213, B: 213) 到 日 色 ， 如 图 5.103 所 示 。 
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图 5.103 ”设置 【 淅 交 又 加 】 参数 


步骤 05 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 20%， 取 消 
【使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 7 像素 ， 如 图 5.104 所 示 。 


+ JI D) 


图 5.104 设置 【投影 】 参 数 


步骤 06 ”选中 【内 阴影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 60%， 取 消 【 使 用 全 局 光 】 复 选 
框 ; 将 【角度 】 更 改 为 -90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.105 所 示 。 
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图 5.105 设置 【内 阴影 】 参 数 


步骤 07 ”选择 工具 箱 中 的 【椭圆 工具 】 量 ， 在 选项 栏 中 将 【填充 】 更 改 为 任意 颜色 ，【 描 边 】 更 改 为 无 ， 在 图 标 中 间 位 置 
按 住 Shift 键 绘制 一 个 正 圆 图形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 5.106 所 示 。 


步骤 08 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 思 按钮 上 ， 复 制 三 个 拷贝 图 层 ,分 别 
将 图 层 名 称 更 改 为 【 控 杆 】、【 基 座 】、【 底 部 】， 如 图 5.107 所 示 。 


图 5.106 ”绘制 正 


图 5.107 ”复制 图 层 


步骤 09 ”在 【图 层 】 面 板 中 选中 【底部 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 恋 按钮 ， 在 菜单 中 选择 【内 阴影 】 命 


少 


步骤 10 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 寺 加 】， 【颜色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%， 取 消 【 使 
用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 -90 度 ，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 如 图 5.108 所 示 。 


图 5.108 设置 【内 阴影 参数 


步骤 11 选中 【渐变 妓 加 】 复 选 枉 ， 将 【渐变 】 更 改 为 灰色 (R: 245, G: 245, B: 245) 到 灰色 (R: 230, G: 
230, B: 230) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.109 所 示 。 
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图 5.109 ZE [Ër k #jo] 参数 


5.7.2 ”绘制 揪 杆 图 像 


绘制 摇 杆 图 像 
制作 摇 杆 阴影 


摇 杆 图 像 


步骤 01 选中 【 基 座 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 


I Q 


图 5.110 所 示 。 


图 5.110 ”缩小 图 形 


步骤 02 ”在 【图 层 】 面 板 中 选中 【 基 座 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 Le 在 菜单 中 选择 【渐变 到 加 】 命 
， 人 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 77, G: 67, B: 210) 到 青色 (R: 36, G: 216, B: 250) ， 如 图 5.111 所 


图 5.111 ZE [ər k &jo] 参数 


步骤 03 ”选中 【内 发 光 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 蓝 色 (R: 
24, G: 85, B: 125) ，【 大 小 】 更 改 为 18 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.112 所 示 。 
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图 5.112 设置 【内 发 光 】〗 参数 


步骤 04 ”在 【图 层 】 面 板 中 选中 【 摇 杆 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 高 按钮 ， 在 菜单 中 选择 【斜面 和 浮雕 ) 


í 
HD 。 


步骤 05 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 1 像素 ，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 30%， 如 图 5.113 所 示 。 
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图 5.113 ”设置 【斜面 和 浮雕】 参数 


步骤 06 ”选中 【渐变 妓 加 】 复 选 枉 ， 将 【渐变 】 更 改 为 灰色 (R: 223, G: 223, B: 223) 到 灰色 (R: 245, G: 
245, B: 245) ，【 缩 放 】 更 改 为 590%， 如 图 5.114 所 示 。 
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图 5.114 ZE [ər k #jo] Z 


步骤 07 ”选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 正 甫 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 硫 】 更 改 为 30%，【 距 
离 】 更 改 为 4 像素 ，【 大 小 】 更 改 为 7 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.115 所 示 。 
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图 5.115 设置 【投影 〗】 参 数 


步骤 08 按 Ctrl+T 组 合 键 执 行 【 上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 这 样 束 元 成 了 效果 的 制作 ， 


如 图 5.116 所 示 。 


图 5.116 最 终 效 果 


58 均衡 器 图 标 


设计 构思 
本 例 讲解 绘制 均衡 器 图 标 ， 该 图 标 在 绘制 过 程 中 以 均衡 器 调节 杆 为 主 视觉 ， 
效果 十 分 真实 、 上 自然 ， 最 终 效果 如 图 5.117 所 示 。 


难 易 指数 : kk k Yc y 
" 案例 位 置 : 源 文件 \ 第 5 草 \ 均 衡器 图 标 .psd 


` 视频 位 置 : 视频 教学 \5.8 均 衡器 图 标 .avi 


图 5.117 最 终 效 果 


重点 分 解 


通过 图 层 样 式 的 灵活 运用 制作 出 立体 效果 ， 整 体 
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主 色调 为 醒目 育 色 ， 以 浅 灰 色 作 为 辅助 色 ， 通 过 浅 灰 色 的 底座 衬托 ， 可 以 很 直观 地 显示 出 均衡 器 进度 效果 。 


Ov 
育 色 (R:210,G:255,B:0) 灰色 (R:239,G:239,B:239) 


5.8.1 ”制作 图 标 轮 万 


< 一 一 绘制 轮廓 图 形 


滩 加 毗 大 所 
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步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 500 像 素 ，【 高 度 】 为 380 像 素 ，【 分 
辨 率 】 为 72 像 素 /英寸 ， 新 建 一 个 空白 画布 ， 将 画布 填充 为 灰色 (R: 213, G: 219, B: 224) 到 灰色 (R: 166, G: 175, B: 
183) 的 径 向 渐变 。 


步骤 02， 选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
60 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 和 矩形， 此 时 将 生成 一 个 【 圆 角 算 形 1】 图 屋 ， 如 图 5.118 所 示 。 


图 5.118 ”绘制 圆 角 矩形 


步骤 03 在 【图 层 】 面 板 中 选中 【 圆 角 起 形 1】 图 层 ， 单 击 面板 辰 部 的 【添加 图 层 样式 】 fx asin, 在 菜单 中 选择 【和 斜面 和 


浮雕 】 命 令 。 


步骤 04 在 弹出 的 对 话 框 中 将 【方法 】 更 改 为 【有 雕刻 清晰 】，【 深 度 】 更 改 为 100%，【 大 小 】 更 改 为 2 像素 ，【 高 光 模 
式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 20%，【 阴 影 模 式 】 更 改 为 【正片 晋 底 】，【 不 透明 度 】 更 改 
为 20%， 如 图 5.119 所 示 。 
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图 5.119 设置 【和 斜面 和 浮雕 】 参 数 


步骤 05 ”选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 堵 加 】， 【不 透明 度 】 更 改 为 100%，【 上 距离】 更 改 为 2 像素 ， 
【大 小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 2.120 所 示 。 
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图 5.120 ”设置 【投影 】 参 数 


5.8.2 ”制作 控制 图 像 


绘制 滑 村 


制作 按键 


控制 图 像 


步骤 01 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 62, G: 78，B: 92) , DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 60 像 素 ， 在 图 标 左 侧 绘制 一 个 圆 角 夫 形 ， 将 生成 一 个 【 圆 角 起 形 2】 图 层 ， 如 图 2.121 所 示 。 


步骤 02 ”选中 【 圆 角 和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【 圆 角 矩形 2 拷贝 】 图 层 ， 分 
别 将 图 层 名 称 更 改 为 【效果 】 和 【滑动 槽 】， 如 图 5.122 所 示 。 


图 5.121 ”绘制 圆 角 和 矩形 


图 5.122 复制 图 层 


步骤 03 ”在 【图 层 】 面 板 中 选中 【滑动 槽 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按钮 ， 在 菜单 中 选择 【内 阴影 】 命 


As 
Xo 


步骤 04 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】， 【颜色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 角 度 】 
更 改 为 -90 度 ，【 距 离 】 更 改 为 2 像素 ， 如 图 5.123 所 示 。 


图 5.123 设置 【内 阴影 】 参 数 


步骤 05 ”选中 【内 友 光 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 50%，【 颜 色 】 更 改 为 深 监 色 
(R: 29, G: 44, B: 57) ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.124 所 示 。 
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图 5.124 设置 【内 发 光 】〗 参数 
提示 与 技巧 


将 【效果 】〗 图 层 隐 藏 ， 可 观 守 下方 图 形 效果 。 


步骤 06 ”选中 【效果 】 图 层 ， 将 其 图 形 【 填 充 】 更 改 为 青色 (R: 0, G: 210, B: 255) ; 执行 菜单 栏 中 的 【图 层 】|【 创 
建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 创 建 前 贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 5.125 所 示 。 


图 5.125 ”创建 剪贴 蒙 版 


步骤 07， 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
60 像 素 ， 在 滑动 条 位 置 绘制 一 个 圆 角 直 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 2】 图 层 ， 如 图 5.126 所 示 。 


步 又 08 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 瑟 按钮 上 ， 复 制 一 个 【 圆 角 和 矩 
形 2 拷 贝 】 图 层 ， 如 图 2.127 所 示 。 


图 5.126 ”绘制 圆 角 和 矩形 
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图 5.127 复制 图 层 


步骤 09 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 上 按钮 ， 在 菜单 中 选择 【斜面 和 浮 


雕 】 命 令 。 


步骤 10 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 3 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【和 角度】 更 改 为 90 度 ，【 高 光 模 式 】 
中 的 【不 透明 度 】 更 改 为 50%，【 阴 影 模式 】 中 的 【不 透明 度 】 更 改 为 30%， 如 图 5.128 所 示 。 
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图 5.128 设置 【斜面 和 浮雕 】 参数 


步骤 11 选中 【渐变 车 加 】 复 选 框 , 将 【渐变 】 更 改 为 灰色 (R: 247, G: 247, B: 247, G: , B: ) 到 灰色 (R: 
224, G: 224, B: 224) ， 如 图 5.129 所 示 。 


步骤 12 ”选中 【外 友 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 20%，【 颜 色 】 更 改 为 黑色 ， 


【大 小 】 更 改 为 2 像素 ， 如 图 5.130 所 示 。 
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图 5.129 ZE [ər #jo] 参数 
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图 5.130 ”设置 【外 发 光 】 参 数 


步骤 13 ”选中 【投影 】 复 选 框 ， 将 【不 透明 度 】 更 改 为 30%，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 如 图 5.131 所 示 。 
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图 5.131 设置 【投影 】 参 数 


步骤 14 选中 【 圆 角 窍 形 2 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 【 填 序 】 更 改 为 灰色 (R: 
204, G: 204, B: 204) ， 再 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 5.132 所 示 。 


步骤 15 ”在 【图 层 】 面 板 中 选中 【 贺 角 和 矩形 2 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 Bl 按钮 ， 为 其 添加 图 层 蒙 
版 ， 如 图 5.133 所 示 。 


图 5.132 ”变换 图 形 


HUL 


图 5.133 ”添加 图 层 蒙 版 


步骤 16 ”选择 工具 箱 中 的 【渐变 工具 】 因 |， 编 辑 黑 色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 肝 按钮 ， 在 图 形 上 拖 
动 隐藏 部 分 图 形 ， 如 图 5.134 所 示 。 


步骤 17， 选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 166, G: 166, B: 166) ，【 描 边 】 
更 改 为 无 ，【 粗 细 】 更 改 为 1 像素 ， 在 图 形 位 置 按 住 shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 5.135 所 示 。 


图 5.134 隐藏 图 形 


图 5.135 ”绘制 图 形 


步骤 18 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Bi pon, 在 菜 蛙 中 选择 【投影 】 命 


As 
Xo 


步骤 19 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】， 【颜色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 距 离 】 
更 改 为 1 像素 ， 完 成 乙 后 单 击 【 确 定 】 按 钮 ， 如 图 2?.136 所 示 。 


图 5.136 ”设置 【投影 】 参 数 


步骤 20 ”选中 【形状 1】 图 层 ， 向 下 复制 两 份 ， 如 图 5.137 所 示 。 


图 5.137 复制 图 形 


步骤 21 在 【图 层 】 面 板 中 选中 【效果 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
5.138 所 示 ， 


步骤 22 选择 工具 箱 中 的 【渐变 工具 】 辕 ， 编 辑 黑 色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 周 按钮， 在 图 形 上 拖 
动 隐藏 部 分 图 形 ， 如 图 5.139 所 示 ， 


图 5.138 添加 图 层 蒙 版 


图 5.139 ”隐藏 图 形 


步骤 23 ”同时 选中 所 有 和 滑 块 相关 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 滑 块 】。 


步骤 24 同时 选中 【 滑 块 】 组 及 【效果 】 和 【滑动 槽 】 两 个 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 调 
节 1】， 如 图 ?5.140 所 示 。 
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图 5.140 “将 图 层 编组 


步骤 25 ”选中 【调节 1】 组 ， 向 右 侧 平 移 复 制 两 份 ， 生 成 【调节 1 拷贝 】 及 【 调 书 1 拷贝 2】 两 个 新 组 ， 如 图 5.141 所 示 。 


图 5.141 复制 图 形 


步骤 26 ”选中 【调节 1 拷贝 】 组 中 的 【 滑 块 】 组 ， 在 画布 中 向 上 移动 ， 如 图 5.142 所 示 。 


步骤 27， 选 择 工具 箱 中 的 【渐变 工具 】 Ë, ， 单 击 【 调 节 1 拷 贝 】 组 中 的 【效果 】 图 层 蒙 版 缩 览 图 ， 在 画布 中 图 形 上 拖 动 ， 
调整 显示 效果 ， 使 其 与 清 块 协调 ， 如 图 ?.143 所 示 。 


图 5.142 ”移动 图 形 


图 5.143 ”调整 蒙 版 


步骤 28 ”以 同样 的 方法 将 【调节 1 拷贝 2】 组 展开 ， 调 整 交 块 及 显示 效果 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 5.144 所 示 。 


图 5.144 ”最终 效果 


59 ”安全 应 用 图 标 


本 例 讲 解 制 作 安 全 应 用 图 标 ， 该 图 标 在 制作 过 程 中 ， 以 圆 角 短 形 作为 主 轮 万 ， 通 过 绘制 + 号 表现 出 安全 的 特征 ， 最 终 效果 如 
图 5.145 所 示 。 


难 易 指数 : k k Ye Ye ya 
. 案例 位 置 : 源 文件 \ 第 5 章 \ 安 全 应 用 图 标 .psd 


视频 位 置 : 视频 教学 \5.9 安 全 应 用 图 标 .avi 


图 5.145 最终 效 果 


重点 分 解 


Cr 


轮廓 止 槽 图 形 安全 标志 


色彩 分 析 


以 杰 色 作为 安全 色 ， 将 灰色 作为 辅助 色 ， 整 体 色调 表现 出 很 强 的 图 标 特征 。 


慢 色 (R:240,G:70,B:40) 灰色 (R:237,G:233,B:232) 


5.9.1 ”制作 轮廓 图 像 


绘制 轮廓 面板 


处 理 立 体质 感 


轮廓 图 像 
操作 步 又 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 400 像 素 ，【 高 度 】 为 300 像 素 ，【 分 
辩 率 】 为 72 像 素 / 严 十， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 深蓝 色 (R: 70, G: 88, B: 112) 到 深 监 色 (R: 42, G: 53, B: 
69) 的 径 向 新 变 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 楼 色 (R: 240, G: 70, B: 40) , D 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 40 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 1】 图 层 ， 如 图 ?.146 所 
不 


图 5.146 ”绘制 图 形 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【 圆 角 矩 


形 1 拷贝 】 图 层 ， 如 图 2.147 所 示 。 


步骤 04 ”将 【 圆 角 和 矩形 1 拷贝 】 图 层 中 图 形 【 填 序 】 更 改 为 灰色 (R: 237, G: 233, B: 232) ， 表 缩小 图 形 高 度 ， 如 图 
5.148 所 示 。 


图 5.147 复制 图 层 


图 5.148 ”变换 图 形 


步骤 05 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 痢 按钮 ， 在 菜单 中 选择 【和 余 
面 和 浮雕 】 命 令 。 


步骤 06 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 7 像素 ，【 高 光 模 式 】 更 改 为 【 甘 加 】，【 不 透明 度 】 更 改 为 50%，【 阴 影 模 
式 】 中 的 【不 透明 度 】 更 改 为 30%， 如 图 5.149 所 示 。 
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图 5.149 ”设置 【斜面 和 浮雕 】 参数 


步骤 07 选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 距 离 】 更 改 为 5 像素 ，【 大 
小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 5.150 所 示 。 
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5.9.2 ”制作 标示 图 像 
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图 5.150 ZE [22] #23 
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制作 止 榜 


制作 标示 图 你 


标示 图 像 


步骤 01 选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 Ë ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 为 无 ，【 半 径 】 更 改 为 20 
像素 ， 在 图 标 中 间 按 住 Shift 键 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 2】 图 层 ， 如 图 2?.151 所 示 。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【 圆 角 失 
形 2 拷贝 】 图 层 ， 如 图 5.152 所 示 。 


图 5.151 22 h] |] # 4E3E 


图 5.152 复制 图 层 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 算 形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 产 按钮 ， 在 菜单 中 选择 【渐变 又 
加 】 命 令 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 楼 色 (R: 250, G: 144, B: 76) 到 楼 色 (R: 250, G: 88, B: 42) ， 如 图 
5.153 所 示 。 


图 5.153 ZE [Ër k #jo] 参数 


步骤 04 选中 【投影 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 昌 色 ，【 不 透明 度 】 更 改 为 70%，【 距 
离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.154 所 示 。 


图 5.154 设置 【投影 】 参 数 


为 了 方便 观 仁 添加 的 图 层 样式 效果 ， 在 设置 图 层 样式 过 程 中 ， 可 以 将 【 圆 角 珑 形 2 拷贝 】 图 层 暂时 隐藏 。 


步骤 05 ”选中 【 圆 角 起 形 2 拷 贝 】 图 层 ， 将 图 形 高 度 适 当 缩 小 ， 如 图 2.155 所 示 。 


图 5.155 ”缩小 图 形 


步骤 06， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疙 按钮 ， 在 菜单 中 选择 【内 


步骤 07 ”在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 60%，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 7 像素 ,如 图 5.156 所 示 。 


图 5.156 ”设置 【内 阴影 】 参 数 


步骤 08 ”选中 【渐变 车 加 】 复 选 框 ， 将 【 淘 变 】 更 改 为 柱 色 (R: 250, G: 144, B: 76) 到 橙色 (R: 250, G: 88, B: 
42) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 5.157 所 示 。 


302283 
IIT TIT | 
混合 模式 : | I 党 +] [pa | 职 消 | 
不 国度 (Pk —— [im |% 
32: 加 汪汪 时 时 时 (sao [J H3M8(v) 
样式 : [st 。 ”<| [J 与 国 导 对齐 人 0 


FREE (Ny: w 5 90 m | gm | 


| 设置 为 点 让 值 | | Suyu 


图 5.157 设置 【 淅 交 又 加 】 参 数 


步骤 09 ”选择 工具 箱 中 的 【矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 红色 (R: 250, G: 162, B: 138) ，【 描 
边 】 更 改 为 无 ， 绘 制 一 个 小 矩形 ， 此 时 将 生成 一 个 【 存 形 1】 图 层 ， 如 图 ?2.128 所 示 。 


步骤 10 ”在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【矩形 1 拷贝 】 
图 层 。 


步骤 11 选中 【 算 形 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 顺 
时 针 旋转 90 度 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 5.159 所 示 。 


图 5.158 复制 图 形 


图 5.159 ”变换 图 形 


步骤 12 ”同时 选中 【矩形 1 拷贝 】 及 【和 矩 形 】 图 层 ， 按 Ctrl+E 组 合 键 将 图 层 合并 ， 此 时 将 生成 一 个 【和 矩 形 1 拷贝 】 图 层 。 


步骤 13 ”选中 【和 矩形 1 拷贝 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 恒 按钮 上 ， 复 制 一 个 【和 矩形 1 拷贝 2】 图 层 ， 如 图 
5.160 所 示 ， 


步骤 14 将 【 算 形 1 拷贝 2】 图 层 中 图 形 【 填 元 】 更 改 为 日 多， 再 将 图 形 向 上 稍微 移动 ， 如 图 5.161 所 示 。 


图 5.161 移动 图 形 


步骤 15 在 【图 层 】 面 板 中 选中 【和 矩形 1 拷贝 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样式 】 # 按钮 ， 在 菜单 中 选择 【投影 】 命 


As 
Xo 


步骤 16 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 革 加 】，【 不 透明 度 】 更 改 为 30%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 
【角度 】 更 改 为 90 原 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 3 像素 ， 完 成 之 后 单 击 【 和 确定】 按钮 ， 这 样 吏 完 成 了 效果 的 制 
作 ， 如 图 5.162 所 示 。 


图 5.102 ”最终 效果 


第 6 章 ”界面 图 像 及 特效 处 理 


TIne_iempah 
DISC-OVE 


(1:55 


GO TO SLEEP 


本 章 讲解 界面 图 像 及 特效 处 理 ， 在 UI 界 面 设计 中 会 经 常 看 到 各 式 各 祥 的 图 像 效 果 ， 这 些 图 像 效 果 代 表 了 不 同 的 UI 使 用 方 
向 ， 比 如 触 控 游戏 界面 中 所 使 用 到 的 触 点 效果 ， 播 放 器 中 的 音量 控件 ， 锁 屏 壁 纸 中 的 月 亮 特效 ， 标 签 特效 等 特效 的 处 理 。 通 过 对 
本章 内 容 的 学 习 可 以 掌握 界面 图 像 及 特效 处 理 ， 达 到 美化 整体 UI 界面 的 效果 。 


制作 消除 图 像 特效 


` 学 习 为 播放 器 添加 音量 控件 
` 学 习 为 天 气 界 面 添加 装饰 元 素 
. 学 会 制作 毛 玻璃 主题 字 

` 学 会 制作 流星 特效 

. 学 会 制作 圆 环 进度 效果 


:掌握 为 界面 添加 头像 的 方法 


6.1 消除 图 像 特 交 


设计 构思 


本 例 讲解 制作 消除 图 像 特效 ， 该 图 像 为 一 款 消 消 乐 类 益 智 游戏 ， 整 体 画 风 十 分 清新 ， 通 过 对 单个 图 像 进行 处 理 ， 令 整个 界面 
具有 出 色 的 交互 效果 ， 最 终 效 果 如 图 6.1 所 示 。 


. 难 易 指数 : 广 畜 丰 议 六 
素材 位 置 : 调用 素材 \ 第 6 齐 \ 消 除 图 像 特效 


案例 位 置 : 源 文 件 \ 第 6 齐 \ 消 除 图 像 特效 .psd 


-视频 位 置 : 视频 教学 \6.1 消 除 图 像 特效 .avi 


图 6.1 了 最终 效果 


操作 步骤 


步骤 01 执行 荣 单 栏 中 的 【文件 】|【 打 开 】 人 驹 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 消 除 图 像 特效 \ 消 除 类 游戏 界面 ;jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.2 所 示 。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【背景 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 冉 按钮 上 ， 复 制 一 个 【背景 拷贝 】 图 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 日， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 2 
上 扣 ， 在 水 果 图 标 适当 位 置 按 住 Shift 键 绘制 一 个 正 圆 图形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.3 所 示 。 


图 6.2 ”打开 素材 


图 6.3 22 h] E B] 


提示 与 技巧 
复制 图 层 的 目的 在 于 ， 对 拷贝 图 层 进 行 处 理 ， 同 时 保留 原 有 图 像 ， 方 便 对 最 终 效 果 进 行 调整 。 
步骤 04 ”选中 【椭圆 1】 图 层 ， 将 其 图 层 【 不 透明 度 】 更 改 为 50%， 效 果 如 图 6.4 所 示 。 


步骤 05 ”同时 选中 【椭圆 1】 及 【背景 拷贝 】 图 层 ， 按 Ctrl+E 组 合 键 将 图 层 合并 ， 此 时 将 生成 一 个 【背景 拷贝 】 图 层 ， 如 图 
6.5 所 泵 。 


图 6.4 更 改 不 透明 度 


图 6.5 ”合并 图 层 


步骤 06 “执行 荣 单 栏 中 的 【 滤 镜 】|【 液 化 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 左 侧 【 脱 胀 工具 】" 合 ' 按钮 ， 将 【大 小 】 更 改 为 
200， 在 绘制 的 正 圆 水 果 位 置 ， 按 住 鼠 标 左 键 为 对 应 的 水 果 图 像 制作 出 膨胀 效果 ， 这 样 残 完成 了 效果 的 制作 ， 如 图 6.6 所 示 。 


图 6.6 ”了 最终 效果 


设计 构思 
本 例 讲解 为 播放 器 添加 音量 控件 ， 通 过 添加 音量 控件 达到 完美 的 界面 控制 效果 ， 同 时 音量 控件 也 丰富 了 整个 界面 元 素 ， 最 终 
效果 如 图 6.7 所 示 。 
- 难 易 指数 : kk Ye ye 
- 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 播放 器 添加 音量 控件 
. 案例 位 置 : 源 文件 \ 第 6 章 \ 为 播放 器 添加 音量 控件 .psd 


` 视频 位 置 : 视频 教学 \6.2 为 播放 器 添加 音量 控件 .avi 
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图 6.7 最 终 效 果 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【打开 】 命令 ,选择 “调用 素材 \ 第 6 章 \ 为 播放 器 添加 音量 控件 \ 音 乐 播放 器 jpg” 文 件 ， 
单 击 【打开 】 按钮， 如 图 6.8 所 示 。 


又 02 ”选择 工具 箱 中 的 【直线 工具 】 ^。， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 213, G: 52, B: 133) ，【 描 边 ] 更 


改 为 无 ，【 粗 细 】 更 改 为 2 像素 ， 按 住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 6.9 所 示 。 
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图 6.8 ”打开 素材 
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图 6.9 ”绘制 线段 


步骤 03 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 赎 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 ， 并 将 【形状 1 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 浅 紫 色 (R: 255, G: 132, B: 233) 。 


步骤 04 ”在 【图 层 】 面 板 中 选中 【形状 1 拷贝 】 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样式 】 Pe: JetH, (ryeEBrh)lejë [2F2226] 
合 令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 显 加 】， 【不 透明 度 】 更 改 为 70%，【 颜 色 】 更 改 为 红色 (R: 255, G: 
0, B: 114) ，【 大 小 】 更 改 为 10 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 6.10 所 示 。 
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图 6.10 ”设置 【外 发 光 】 参 数 


步骤 05 ”选中 【形状 1 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 线段 长 度 缩小 ， 完 成 之 后 按 Enter 键 确 


认 ， 如 图 6.11 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 紫 色 (R: 255, G: 132, B: 233) ，【 描 
边 】 更 改 为 无 ， 在 线段 适当 位 置 按 住 Shift 键 绘制 一 个 小 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.12 所 示 。 


ompan 
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图 6.11 缩小 长 度 


图 6.12 ”绘制 小 正 圆 


步骤 07 ”在 【形状 1 拷贝 】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 企 【椭圆 1】 图 层 
名 称 上 单 击 刀 标 右键 ,从 弹出 的 快捷 菜单 中 选择 【粘贴 图 层 样 式 】 命 令 ， 如 图 6.13 所 示 。 


图 6.13 ”拷贝 并 粘贴 图 层 样式 


步骤 08 执行 菜单 壬 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 6 草 \ 为 播放 器 添加 音量 控件 \ 图 标 .psd” 文 件 ， 单 击 
【打开 】 按 和 钮 。 


步骤 09 ”将 打开 的 素材 拖 入 画布 中 进度 条 左右 两 侧 并 适当 缩小 ， 表 将 其 【 摘 边 】 更 改 为 紫色 (R: 213, G: 52, B: 
133) ， 这 样 束 完成 了 效果 的 制作 ， 如 图 6.14 所 示 。 
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图 0.14 ”最终 效果 


设计 构思 


本 例 讲解 为 锁 屏 壁纸 添加 月 充 特 效 ， 该 锁 屏 壁纸 为 一 幅 夜 晓 的 风景 图 像 ， 整 体 色 彩 鲜艳 ， 十 分 漂亮 ,如 果 为 其 添加 月 沈 特 效 
就 会 使 整个 画面 更 加 均衡 ， 视 觉 效 果 更 加 出 色 ， 最 终 效果 如 图 6.15 所 示 。 


. 难 易 指数 : 次 砍 六 交 交 
` 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 锁 屏 壁纸 添加 月 亮 特 效 
. 案例 位 置 : 源 文件 \ 第 6 章 \ 为 锁 屏 壁纸 添加 月 亮 特效 .psd 


“ 视频 位 置 : 视频 教学 \6.3 为 锁 屏 局 纸 添 加 月 元 特效 .avi 
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图 6.15 ”最终 效 果 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 草 \ 为 鳞 屏 壁 纸 添 加 月 亮 特效 \ 锁 屏 壁 纸 jpg” 文 件 ， 
单 击 【 打 开 】 按 钮 ， 如 图 6.16 所 示 。 


选择 工具 箱 中 的 【椭圆 工具 】 策 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 
正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.17 所 示 。 


GO TO SLEEP 


图 6.16 ”打开 素材 


GO TO SLEEP 


图 6.17 ”绘制 正 圆 


步骤 03， 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 襄 按 钮 ， 在 菜单 中 选择 【外 发 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【看 加 】,，【 不 透明 度 】 更 改 为 50%，【 颜 色 】 更 改 为 日 色 ，【 大 小 】 更 改 为 50 
像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 6.18 所 示 。 
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图 6.18 设置 【外 发 光 】 参 数 


在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 图 层 【 填 充 】 更 改 为 70%， 这 样 束 完成 了 效果 的 制作 ， 如 图 6.19 所 
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图 6.19 最终 效 果 


64 ”为 内 屏 制作 标签 特效 


设计 构思 


本 例 讲解 为 闪 屏 制作 标签 特效 ， 闪 屏 作为 一 款 应 用 中 最 先 展 示 给 用 户 的 部 分 ， 其 视觉 设计 要 求 较 高 ， 因 此 在 图 形 图 像 等 元 素 
的 使 用 上 需要 加 入 一 些 针 对 主题 的 特效 。 本 例 以 漂 腕 的 街道 夜景 作为 主 视 沉 图像， 通过 拷贝 部 分 区 域 图 像 并 将 部 分 进行 模糊 化 处 


理 ， 达 到 突出 焦点 视觉 的 目的 ， 最 终 效 果 如 图 6.20 所 示 。 
` 难 易 指数 : k kky 


` 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 闪 屏 制作 标签 特效 


案例 位 置 : 源 文件 \ 第 6 章 \ 为 闪 屏 制作 标签 特效 .psd 


. 视频 位 置 : 视频 教学 \6.4 为 闪 屏 制作 标签 特效 .avi 
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图 0.20 ”最 终 效 果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 6 章 \ 为 内 屏 制 作 标 签 特效 \ 旅 行 管 家 .psd” 文 件 , 单 
击 【 打 开 】 按 钮 。 


步骤 02 ”选择 工具 箱 中 的 【和 矩形 选 框 工具 】 :-;， 在 图 像 中间 绘 制 一 个 矩 形 选区 ， 如 图 6.21 所 示 ，。 
提示 与 技巧 
在 绘制 选区 时 ， 尽 量 在 构图 完美 的 区 域 进行 绘制 。 


步骤 03 ”选中 【背景 】 图 层 ,， 执 行 菜 蛙 柱 中 的 【图 层 】| 【新建 】|【 通 过 拷贝 的 图 层 】 命 令 ， 将 生成 一 个 【图 层 2】 图 层 ， 
如 图 6.22 所 示 。 
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图 6.21 ”打开 素材 
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图 6.22 ”通过 拷贝 的 图 层 
提示 与 技巧 
按 Ctrl+J 组 合 键 可 快速 执行 【通过 拷贝 的 图 层 〗】 命令 。 
步骤 04 在 【图 层 】 面 板 中 选中 【图 层 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 站 按钮 在 菜单 中 选择 【 描 边 】 命 令 ， 


在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 8 像素 ，【 位 置 】 更 改 为 【内 部 】，【 颜 色 】 更 改 为 日 色 ， 完 成 乙 后 单 击 【确定 】 按 钮 ， 如 
图 6.23 所 示 。 


图 6.23 ”设置 【 描 边 】 参 数 


步 又 05 ”选择 工具 箱 中 的 【矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 措 边 图 像 底部 绘制 
一 个 矩形 ， 此 时 将 生成 一 个 【和 矩形 1】 图 层 ， 如 图 6.24 所 示 。 


步骤 06 选择 工具 箱 中 的 【 横 排 文字 工具 】 最 | 在 矩形 位 置 添 加 文字 (仿宋 Regular) ， 如 图 6.25 所 示 。 


图 6.24 ”绘制 图 形 


图 0.25 


添加 文字 


步骤 07 ”同时 选中 【让 旅行 成 为 永远 难 志 的 回忆 ! 】、【 直 形 1】、 
换 】 命 令 ， 将 对 象 适 当 旋 转 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 6.26 所 示 。 


【图 层 2】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变 


步骤 08 ”在 【图 层 】 面 板 中 选中 【背景 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 按钮 上 ， 复 制 一 个 【背景 拷贝 】 


层 ， 如 图 6.27 所 示 。 


IR] 


— 
— 


mamam D] 3: 


图 6.26 ”旋转 对 象 


图 6.27 ”复制 图 层 
步骤 09 选中 【背景 拷贝 】 图 层 ， 执 行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 高 斯 模糊 】 合 令 。 


步 又 10 ”在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 4 像素 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 6.28 所 示 。 


ss... [P [YK] Es z ° 


KJ EE = 


Travel Managager 


图 6.28 ”最终 效果 


6.5 为 信息 界面 制作 主题 时 字 


设计 构思 
本 例 讲解 为 信息 制作 主题 字 ， 绘 制 过 程 中 主要 以 突出 文字 信息 为 主 ， 更 改 文字 信息 所 在 图 层 的 混合 模式 即 可 ， 最 终 效果 


如 图 6.29 所 示 。 
- 难 易 指数 : kk Yc Yc Yc 
. 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 信息 界面 制作 主题 字 
案例 位 置 : 源 文 件 \ 第 6 章 \ 为 信息 界面 制作 主题 字 .psd 


` 视频 位 置 : 视频 教学 \6.5 为 信息 界面 制作 主题 字 .avi 


mr 


图 6.29 最终 效 果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 合 令 ， 选 择 “ 调 用 率 材 \ 第 6 章 \ 为 信息 界面 制作 主题 字 \ 信 息 界 面 jpg” 文 件 ， 单 
击 【 打 开 】 按 钮 ， 如 图 6.30 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 画布 适当 位 置 添加 文字 (仿宋 Regular) ， 如 图 6.31 所 示 。 


图 6.30 “添加 素材 


图 6.31 添加 文字 


步骤 03 ”同时 选中 两 个 文字 图 层 ， 将 其 图 层 混合 模式 设置 为 【 填 加 】， 这 样 融 完 成 了 效果 的 制作 ， 如 图 6.32 所 示 。 


图 0.32 ”最终 效 果 


66 市 作 专 边 效果 


设计 构思 


本 例 讲解 制作 卷 边 效果 ， 卷 边 效果 可 以 使 图 像 更 加 直观 、 形 象 ， 通 过 立体 图 形 的 结合 ， 使 整个 界面 更 富有 立体 感 ， 最 终 效 果 
如 图 6.33 所 示 。 


. 难 易 指数 : kk Ye ye 
. 素材 位 置 : 调用 素材 \ 第 6 章 \ 制 作 卷 边 效果 
. 案例 位 置 : 源 文件 \ 第 6 章 \ 制 作 卷 边 效果 .psd 


. 视频 位 置 : 视频 教学 \6.6 制 作 卷 边 效 果 .avi 


图 6.33 ”最 终 效果 


步骤 01 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 草 \ 制 作 卷 边 效果 \ 文 艺 主 题 .psd” 文 件 ,， 单 击 【 打 
开 】 按 钮 ， 如 图 6.34 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【多 边 形 套 索 工具 】 > ， 在 【照片 】 图 层 中 图 像 右 上 角 绘 制 一 个 三 角形 选区 ， 选 中 右上 角 部 分 图 
像 ， 如 图 6.35 所 示 . 


图 6.34 ”打开 素材 


图 6.35 ”绘制 选区 


步骤 03 选中 【照片 】 图 层 ， 按 Delete 键 将 选区 中 的 图 像 删 除 ， 再 按 Ctrl+ D 组 合 键 取消 选区 ， 如 图 6.36 所 示 。 


步骤 04， 选 择 工具 箱 中 的 【钢笔 工具 】 礁 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】 按 钮 ， 在 弹出 的 选项 中 选择 【形状 】， 将 
【填充 】 更 改 为 日 色 ，【 描 边 】 更 改 为 无 。 


步骤 05 在 刚才 删除 图 像 后 的 位 置 绘制 一 个 卷 边 效果 图 形 ， 此 时 将 生成 一 个 【形状 1】 图 层 ， 如 图 6.37 所 示 。 


图 6.36 ”删除 图 像 


图 6.37 ”绘制 图 形 


步骤 06 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 如 按钮 ， 在 菜单 中 选择 【渐变 笃 加 ) 


í. 
HD Zo 


步骤 07 ”在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 30%，【 渐 变 】 更 改 为 黑色 到 日 色 再 到 黑色 ; 将 日 色色 标的 位 置 更 改 为 
50%，【 和 角度 】 更 改 为 75 度 ，【 缩 放 】 更 改 为 50%， 如 图 6.38 所 示 。 


取消 
新 娃 样式 CW)..。 | 


翌 式 : | 线性 * | [7 与 图 层 对 六 
FEE (N): (A 5 ”| 度 | mz | 


图 6.38 ”设置 【 淅 交 又 加 】 参 数 


步骤 08 ”选中 【投影 】 复 选 框 ,将 【不 透明 度 】 更 改 为 30%， 取 消 【 使 用 全 局 光 】 复 选 框 ,将 【角度 】 更 改 为 135 度 ，【 距 
离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 这 样 束 完 成 了 效果 的 制作 ， 如 图 6.39 所 示 。 


图 6.39 ”最 终 效果 


6.7 ”为 大气 界 面 添加 委 钱 元 率 


> 六 、_ 上 大/ 
设计 构思 


本 例 讲解 为 天 气 界面 添加 装饰 元 素 ， 本 例 中 的 天 气 界 面具 有 很 强 的 主题 特征 ， 明 显 的 季节 特性 衬托 出 天 气 的 特点 ， 最 终 效 果 
如 图 6.40 所 示 。 


` 难 易 指数 : kk y<yYcxc 
` 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 天 气 界 面 添加 装饰 元 素 
案例 位 置 : 源 文件 \ 第 6 章 \6.7 为 天 气 界 面 添加 装饰 元 素 .psd 


` 视频 位 置 : 视频 教学 \6.7 为 天 气 界面 添加 装饰 元 素 .avi 
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图 6.40 最终 效果 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 为 天 气 界面 添加 半 饰 元 素 \ 天 气 界面 .psd” 文 


件 ， 单 击 【 打 开 】 按 钮 ， 如 图 6.41 所 示 。 


i>) 


步骤 02 ”选择 工具 箱 中 的 【画笔 工具 】 "4 ， 在 【画笔 】 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 为 6 像素 ，【 间 距 】 更 
改 为 1000%， 如 图 6.42 所 示 。 


步骤 03 ”选中 【形状 动态 】 复 选 框 ， 将 【大 小 拌 动 】 更 改 为 100%， 如 图 6.43 所 示 。 
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图 6.41 ”打开 素材 
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图 6.42 ”设置 画笔 笔尖 形状 
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图 6.43 ”设置 【形状 动态 】 参 数 
步骤 04 ”选中 【散布 】 复 选 框 , 将 【散布 】 更 改 为 1000%， 如 图 6.44 所 示 。 


步骤 05 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 按钮 ， 在 【背景 】 图 层 上 方 新 建 一 个 【图 层 1】 图 层 。 


步骤 06 将 前 景 


色 设 置 为 日 色 ， 在 图 像 上 按 住 鼠标 并 拖 动 添加 下 雪 图 像 ， 这 样 残 完成 了 效果 的 制作 ， 如 图 6.45 所 示 。 
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图 6.44 设置 【散布 】 参 数 
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图 6.45 最终 效 果 


设计 构思 
本 例 讲解 制作 滑动 解锁 特效 ， 解 锁 的 方式 有 很 多 种 ， 每 一 种 解锁 方式 代表 了 不 一 样 的 交互 感受 ， 最 终 效果 如 图 6.46 所 示 。 
. 难 易 指数 : kk yc yx Y 
' 素材 位 置 : 调用 素材 \ 第 6 和 草 \ 滑 动 解锁 特效 


案例 位 置 : 源 文件 \ 第 6 章 \ 滑 动 解 锁 特效 .psd 


` 视频 位 置 : 视频 教学 \6.8 滑 动 解锁 特效 .avi 


向 下 方 滑动 解 猎 


8646 最终 歼 采 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 滑 动 解锁 特效 \ 锁 屏 待 机 界面 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.47 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 上， 在 界面 适当 位 置 添加 文字 (方正 兰亭 细 黑 ) ， 如 图 6.48 所 示 。 


图 6.47 ”打开 素材 
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图 6.48 添加 文字 


步骤 03 ”选择 工具 箱 中 的 【椭圆 工具 】 多 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 文字 下 方 按 住 Shift 
键 绘 制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.49 所 示 。 


步骤 04 ”将 正 圆 同 下 移动 复制 两 份 ， 将 生成 【椭圆 1 拷贝 】 及 【椭圆 1 拷贝 2】 两 个 新 图 层 ， 如 图 6.50 所 示 。 


图 6.50 复制 图 形 


步骤 05 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 半 径 】 更 改 为 
5 像素 ， 按 住 Shift 键 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 层 ， 如 图 6.51 所 示 。 


步骤 06 选中 【 圆 角 算 形 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 当 出 现 变 形 框 之 后 ， 在 选项 栏 的 【旋转 4】 
文本 框 中 输入 45， 完 成 乙 后 按 Enter 键 确认 ， 如 图 6.52 所 示 。 


图 6.51 ”绘制 图 形 


图 0.52 ”旋转 图 形 


&07 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 Ë 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 
图 6.53 所 示 。 


步骤 08 ”选择 工具 箱 中 的 【矩形 选 框 工 具 】 :: ， 在 圆 角 和 矩形 上 半 部 分 位 置 绘制 一 个 矩形 选区 ， 如 图 6.54 所 示 。 


图 6.53 ”添加 图 层 蒙 版 


图 6.54 ”绘制 选区 


步骤 09 ”将 选区 填充 为 黑色 ， 隐 藏 部 分 图 形 ， 完 成 之 后 按 Ctrl+ D 组 合 键 取 消 选区 ， 如 图 6.55 所 示 。 
步骤 10 ”同时 选中 除 【 背 景 ] 和 文字 层 之 外 的 所 有 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 一 个 【组 1】 组 ， 单 击 面板 底部 
的 【添加 图 层 蒙 板 】 辆 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 6.56 所 示 。 


图 6.55 [T 3 EE 
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图 6.56 ”添加 图 层 蒙 版 


步骤 11 ”选择 工具 箱 中 的 【渐变 工具 】 央 |， 编 辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 冉 按钮， 在 图 形 上 拖 
动 ， 隐 藏 部 分 图 形 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 6.57 所 示 。 
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图 6.57 最 终 效 果 


69 ”速度 指示 特效 


设计 构思 


本 例 讲解 制作 速度 指示 特效 ， 在 制作 过 程 中 ， 将 动感 的 光线 与 直观 的 指示 图 像 相 结合 ， 很 好 地 突出 速度 主题 ， 同 时 炫 酷 的 光 
效 令 整 个 视觉 效果 相当 出 色 ， 最 终 效 果 如 图 6.58 所 示 。 


人 人 大 全 六 四 大 
` 素材 位 置 : 调用 素材 \ 第 6 章 \ 速 度 指示 特效 
" 案例 位 置 : 源 文件 \ 第 6 章 \ 速 度 指示 特效 .psd 


` 视频 位 置 : 视频 教学 \6.9 速 度 指示 特效 .avi 
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图 6.58 最终 效果 
操作 步骤 


步骤 01 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 6 草 \ 速 度 指示 特效 \ 雷 达 测 速 界面 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.59 所 示 。 


】， 以 速度 值 中 心 为 起 点 按 住 Alt+ shift 组 合 键 绘制 一 个 正 圆 路 径 ， 如 图 6.60 所 示 。 


REPORT 


Police Incident 


图 6.59 ”打开 素材 


图 6.60 ”绘制 路 径 


步 又 03 ”选择 工具 箱 中 的 【直接 选择 工具 】 必 ， 选 中 路 径 底 部 锚 点 ， 将 其 删除 ， 如 图 6.61 所 示 。 


除 锚 点 


图 6.61 J 


步骤 04 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 5 像素 ，【 硬 度 】 更 改 为 100%， 如 图 6.62 所 示 。 


步骤 05 ”新建 一 个 图 层 -图 层 1， 将 前 景色 更 改 为 白色 ， 在 【路 径 】 面 板 中 的 路 径 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜 
单 中 选择 【 描 边 路 径 】 命 令 ， 在 弹出 的 对 话 框 中 选择 【工具 】 为 【画笔 】， 确 认 选 中 【模拟 压力 】 复 选 框 ， 完 成 之 后 单 击 【 确 
Ë] 按钮 ， 如 图 6.63 所 示 。 


图 6.62 ”设置 笔触 


图 6.63 4632 364 


步骤 06 ” 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 像 适当 旋转 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 6.64 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【和 套 索 工具 】 = 在 图 像 右 侧 区 域 绘制 一 个 不 规则 选区 ， 如 图 6.65 所 示 。 


图 6.64 ”旋转 图 像 


图 6.65 ”绘制 选区 


步骤 08 按 Delete 键 将 选区 中 的 图 像 删除 ， 完 成 乙 后 按 Ctrl+ D 组 合 键 取 消 选区 ， 如 图 6.66 所 示 。 


步骤 09 ”选择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 图 像 右 侧 端 点 位 置 
按 住 shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.67 所 示 。 


图 6.67 22] E B] 


步骤 10 在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 P(F24H, Zrszeerhubje (Wr2==S)n] 


— 
Xo 


步骤 11 在 弹出 的 对 话 框 中 将 【不 透明 度 】 更 改 为 50%，【 渐 变 】 更 改 为 青色 (R: 144, G: 215, B: 255) 到 青色 (R: 
0, G: 174, B: 255) ，【 角 度 】 更 改 为 0， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 6.68 所 示 。 
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步骤 12， 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 次 按 钮 ， 在 菜单 中 选择 【外 发 光 】 命 


As 
Xo 


步骤 13 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【线性 减 淡 (添加) 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 青 
色 (R: 0, G: 204, B: 255) ，【 大 小 】 更 改 为 20 像 素 ， 完 成 之 后 日 击 【确定 】 按 钮 ， 如 图 6.69 所 示 。 
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图 6.69 ”设置 【外 发 光 】 参 数 


步骤 14， 在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 圈 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
6.70 所 示 。 


步骤 15 ”选择 工具 箱 中 的 【渐变 工具 】 加 ， 编 辑 黑 色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 央 | 按钮 ， 在 图 像 上 拖 
动 ， 将 左 侧 部 分 图 像 隐藏 ， 这 样 残 完 成 了 效果 的 制作 ， 如 图 6.71 所 示 。 
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图 6.70 ”添加 图 层 蒙 版 
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图 6.71 最终 效果 


610 ” 毛 玻 璃 主题 子 


设计 构思 
本 例 讲 解 制 作 毛 玻璃 主题 字 ， 界 面 中 的 主题 字样 式 有 很 多 种 ， 多 数 情 况 下 根据 实际 的 界面 图 像 ， 来 确定 对 应 风格 的 主题 字 ， 
最 终 效 果 如 图 6.72 所 示 。 


. 难 易 指数 : kk ycycyc 
- 素材 位 置 : 调用 素材 \ 第 6 章 \ 毛 玻璃 主题 字 
案例 位 置 : 源 文件 \ 第 6 章 \ 毛 玻璃 主题 字 .psd 


. 视频 位 置 : 视频 教学 \6.10 毛 玻璃 主题 字 .avi 
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图 6.72 ”了 最终 效果 
操作 步骤 
步骤 01 执行 荣 


单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 6 草 \ 毛 玻璃 主题 子 \ 绿 色 壁 纸 jpg” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 如 图 6.73 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【和 矩形 选 框 工 具 】 六 :， 绘 制 一 个 矩形 选区 ， 执 行 菜单 栏 中 的 【图 层 】|【 新 建 】|【 通 过 拷贝 的 图 


层 】 命 令 ， 将 生成 一 个 【图 层 1】 图 层 ， 如 图 6.74 所 示 。 
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图 6.74 ”绘制 选区 


步骤 03 ” 按 住 Ctrl 键 单 击 【 图 层 1】 图 层 缩 虎 图 ， 将 其 载 入 选区 。 


步骤 04 执行 荣 单 栏 中 的 【 滤 蚀 】|【 模 糊 】|【 遍 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【半径 】 更 改 为 10 像 素 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 如 图 6.75 所 示 。 


252, B: 189) ，【 宽 度 】 更 改 为 3 点 ， 治 模糊 图 像 边 绿 绘制 一 个 矩形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 6.76 所 示 。 


图 6.75 “添加 高 斯 模糊 


图 6.76 ”绘制 矩形 


在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【矩形 1 拷贝 】 
图 层 ， 如 图 6.77 所 示 。 


选中 【和 窍 形 1 拷贝 】 图 层 ， 在 选项 栏 中 将 其 【 描 边 】 更 改 为 2 点 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换】 谷 令 ， 将 
图 形 等 比 放 大 ， 完 成 之 后 按 Enter 键 确认 ， 表 将 其 图 层 【 不 透明 度 】 更 改 为 50%， 效 果 如 图 6.78 所 示 。 


图 6.77 复制 图 形 


图 6.78 ”更改 不 透明 度 


骤 08 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 适当 的 位 置 添加 文字 (方正 清 刻 本 悦 宋 简 ) ， 这 样 就 完成 了 效果 的 制 
作 ， 如 图 6.79 所 示 。 
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图 6.79 ”最 终 效果 


6.11 ”流星 特效 的 制作 


设计 构思 


本 例 讲解 制作 流星 特效 ， 该 界面 十 分 简洁 ， 通 过 添加 流星 特效 ， 使 整体 界面 更 富有 灵动 性 ， 最 终 效 果 如 图 6.80 所 示 。 
难 易 指数 : kok yc yc yc 

' 素材 位 置 : 调用 素材 \ 第 6 章 \ 流 星 特 效 的 制作 

案例 位 置 : 源 文 件 \ 第 6 章 \ 流 星 特效 的 制作 .psd 


` 视频 位 置 : 视频 教学 \6.11 流 星 特 效 的 制作 .avi 
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图 60.80 ”最 终 效 果 
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执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 流 星 特效 的 制作 \ 湖 面 夜景 界面 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.81 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【直线 工具 】 人 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 1 像 
素 ， 绘 制 一 条 倾斜 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 6.82 所 示 。. 


图 6.81 打开 素材 


图 6.82 ”绘制 线段 


步骤 03 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 图 层 混合 模式 更 改 为 【去 加 】， 青 单 击 面板 底部 的 【添加 图 层 蒙 版 】 
Dl 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 6.83 所 示 。 


步骤 04 ”选择 工具 箱 中 的 【渐变 工具 】 央 |， 编 辑 黑 色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 周 按钮 ， 在 线段 上 拖 
动 ， 隐 藏 部 分 线段 ， 如 图 6.84 所 示 。 


图 6.83 ”添加 图 层 蒙 版 


图 6.84 隐藏 线段 


又 05 ”选中 【形状 1】 图 层 ， 将 其 复制 多 份 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 6.85 所 示 。 


图 0.85 最终 效 果 


6.12” 圆 环 进度 效果 


设计 构思 


本 例 讲 解 制作 圆 环 进度 效果 ， 该 圆 环 进度 图 形 VÀ xE. [Ë] 为 基础 图 形 ; 通过 对 其 变形 同 时 隐藏 部 分 图 形制 作出 完美 的 进度 效 
果 ， 最 终 效果 如 图 6.86 所 示 。 


` 难 易 指数 : 真 克 六 次 站 


素材 位 置 : 调用 素材 \ 第 6 章 \ 圆 环 进度 效果 
. 案例 位 置 : 源 文 件 \ 第 6 章 \ 圆 环 进度 效果 .psd 


' 视频 位 置 : 视频 教学 \6.12 圆 环 进度 效果 .avi 
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图 6.86 最终 效果 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 圆 环 进度 效果 \ 云 咒 应 用 界面 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.87 所 示 。 


3 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 青色 (R: O, G: 
210, B: 255) ，【 宽 度 】 更 改 为 10 点 ， 按 住 Shift 键 绘制 一 个 圆 环 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.88 所 示 。 
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Backup 1 


图 6.87 ”打开 素材 
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图 6.88 ”绘制 圆 环 
具 箱 中 的 【直接 选择 工具 】 靶 ， 选 中 圆 环 右 下 角 部 分 线段 ， 将 其 删除 ， 如 图 6.89 所 示 。 


步骤 04 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 圈 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 


6.90BTz<. 


图 6.89 ”删除 线段 


图 6.90 ”添加 图 层 蒙 版 


步骤 05 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 
为 300 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 6.91 所 示 。 
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图 6.91 设置 笔触 
步骤 06 ”将 前 景色 更 改 为 黑色 ， 人 在 图 形 部 分 区 域 涂 抹 ， 将 其 隐藏 ， 这 样 就 完成 了 效果 的 制作 ， 如 图 6.92 所 示 。 
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图 6.92” 最终 效果 


6.13 ”为 界面 添加 头像 


设计 构思 


本 例 讲解 为 界面 添加 头像 ， 几 乎 所 有 的 登录 界面 都 会 有 头像 信息 ， 


效果 如 图 6.93 所 示 。 
难 易 指数 : Kk>kycXcyxc 
素材 位 置 : 调用 素材 \ 第 6 章 \ 为 界面 添加 头像 


` 人生 例 位 置 : 


` 视频 位 置 : 


源 文件 \ 第 6 章 \ 为 界面 添加 头像 .psd 


视频 教学 \6.13 为 界面 添加 头像 .avi 


Bs 
#@@@ (sar 全 


头像 的 表现 方式 有 多 种 ， 最 为 常用 的 是 以 园 形 呈 


现 ， 
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图 6.93 zt 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 为 界面 添加 头像 \ 相 册 管 理 界面 ;pg” 文 件 ， 单 击 
【打开 】 按 钮 ， 如 图 6.94 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 5 
， 按 住 Shift 键 绘制 一 个 圆 环 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 6.95 所 示 。 
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Sign in with Twitter 


图 6.94 ”打开 素材 


图 6.95 ”绘制 圆 环 


步骤 03 ”执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 6 草 \ 图 像 jJpg” 文 件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 
素材 拖 入 画布 中 ， 其 图 层 名 称 更 改 为 【图 层 1】， 如 图 6.96 所 示 。 


步骤 04 执行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 合 令 ， 为 当前 图 层 创 建 剪 贴 蒙 版 ， 隐 藏 部 分 图 像 ， 再 将 图 像 适当 缩小 
及 移动 ， 这 样 残 完 成 了 效果 的 制作 ， 如 图 6.97 所 示 。 
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图 6.96 添加 素材 
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图 6.97 最 终 效 果 


6.14 为 专辑 图 像 洪 加 倒影 


本 例 讲 解 为 专辑 图 像 添 加 倒影 ， 该 界面 视觉 效果 十 分 漂 
加 出 色 ， 最 终 效 果 如 图 6.98 所 示 。 


` 素材 位 置 : 


人生 例 位 置 : 


` 视频 位 置 : 


: k>kycxcx 


调用 素材 \ 第 6 章 \ 为 专辑 图 像 添加 倒影 
源 文件 \ 第 6 章 \ 为 专辑 图 像 添加 倒影 .psd 


视频 教学 \6.14 为 专辑 图 像 添加 倒影 .avi 
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1 
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图 6.98 最终 效果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 章 \ 为 专辑 图 像 添 加 倒 员 \ 界 面 ;pg、 专 辑 .psd” 文 
单 击 【打开 】 按 钮 ， 如 图 6.99 所 示 。 


步骤 02 ”将 专辑 文档 中 的 图 像 拖 至 界面 中 ， 如 图 6.100 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【专辑 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【专辑 拷贝 】 


图 6.99 ”打开 素材 


图 6.100 添加 素材 


消 骤 04 ”选中 【专辑 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 图 像 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 荣 单 中 选 
择 【 垂 直 翻 转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 将 图 像 向 下 移动 ， 如 图 6.101 所 示 。 


步骤 05 “在 【图 层 】 面 板 中 选中 【专辑 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 贺 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
6.102 所 示 。 


i F 
u Li 
> a 


图 6.101 变换 图 像 


` 


这 


图 6.102 


添加 图 层 蒙 版 


选择 工具 箱 中 的 【渐变 工具 】 古 ] ， 编 辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 硬 | 按钮 ， 在 图 像 上 拖 
样 束 完成 了 效果 的 制作 ， 如 图 6.103 所 示 。 


图 60.103 ”了 最终 效果 


设计 构思 


本 例 讲解 为 界面 背景 添加 装饰 ， 该 界面 整体 比较 简洁 ， 通 过 添加 装饰 元 素 ， 使 整个 界面 效果 更 加 出 色 ， 最 终 效 果 如 图 6.104 
所 示 。 


. 难 易 指数 : kk k Ye ye 
` 素材 位 置 : 调用 素材 \ 第 6 章 \ 为 界面 背景 添加 装饰 
案例 位 置 : 源 文件 \ 第 6 章 \ 为 界面 背景 添加 装饰 .psd 


` 视频 位 置 : 视频 教学 \6.15 为 界面 背景 添加 装饰 .avi 
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图 6.104 ”最 终 效 有 果 


执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 6 草 \ 为 界面 背景 添加 闭 饰 \ 界 面 .psd、 飞 机 .psd” 文 
件 , 蛙 击 【打开 】 按 钮 ， 如 图 6.105 所 示 。 


步骤 02 将 飞机 图 像 拖 至 界面 登录 框 右上 角 位 置 ， 并 适当 缩小 调整 ， 如 图 6.106 所 示 。 


图 6.105 “打开 素材 


@, 44:00 
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图 6.106 ”添加 素材 


步骤 03 ”选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 1 像 
素 ， 在 飞机 后 方 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 将 其 移 至 【登录 框 】 下 方 ， 如 图 6.107 所 示 。 


图 6.107 ”绘制 线段 


步骤 04 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 图 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
6.108 所 示 。 


步 又 05 ”选择 工具 箱 中 的 【渐变 工具 】 芽 ] ， 编 辑 黑 色 到 白色 的 渐变 ， 单 击 选 项 栏 中 的 【线性 渐变 】 辜 按钮 ， 在 线段 上 拖 
动 ， 隐 藏 部 分 线段 ， 如 图 6.109 所 示 。 


图 6.109 ”隐藏 图 形 


选中 【形状 1】 图 层 ， 将 线段 向 元 下 角 方 向 复制 一 份 ， 这 样 融 完成 了 效果 的 制作 ， 如 图 6.110 所 示 。 


@ 44:00 Wam- 


图 60.110 最终 效果 


第 7/ 章 ” 精彩 洲 戏 界面 设计 


本 章 介 绍 


本 章 讲 解 精彩 游戏 界面 设计 ， 本 章 中 的 游戏 界面 效果 相当 出 色 ， 以 起 稿 草图 与 完整 界面 绘制 ， 全 面 讲 解 一 套 游戏 界面 的 设计 
流程 。 随 着 人 们 对 视觉 化 图 像 的 要 求 越 来 越 高 ， 游 戏 界 面 的 主题 强化 设计 也 越 来 越 重 要 ， 在 本 章 中 列举 了 比如 间 关 大 冒险 界面 设 
计 、 动 物 卡 牌 游戏 界面 设计 、 射 击 大 战 游戏 界面 设计 及 数字 主题 游戏 界面 设计 ， 通 过 对 这 
精彩 游戏 界面 设计 。 


些 游戏 界面 的 学 习 可 以 掌握 不 同 风格 的 


要 操 索 3 引 


学 会 闻 关 大 冒险 界面 设计 


' 学习 动物 卡 牌 游戏 界面 设计 
掌握 射击 大 战 游戏 界面 设计 的 方法 


. 学 会 数字 主题 游戏 界面 设计 


7.1 加 天 大 冒险 界面 设计 


设计 构思 


本 例 讲 解 制作 浆 关 大 冒险 界面 ， 以 漂亮 的 冰天雪地 为 基础 场景 ， 将 游戏 元 素 与 之 相 结 合 ， 整 体 表 现 出 很 强 的 冒险 风格 。 本 例 
草图 及 最 终 效 果 如 图 7.1 所 示 。 


图 7.1 最 终 效 果 


` 素材 位 置 : 调用 素材 \ 第 7 章 \ 浆 关 大 冒险 界面 
案例 位 置 : 源 文件 \ 第 7 章 \ 净 关 大 冒险 开始 界面 .psd、 冯 关 大 冒险 关卡 界面 .psd 
. 视频 位 置 : 视频 教学 \7.1 间 关 大 冒险 开始 界面 设计 .avi 


` 难 易 指数 : kk k kk 


状态 图 标 开始 按钮 


主体 色 为 蓝 色 ， 以 紫色 等 颜色 作为 辅助 色 ， 整 个 游戏 界面 色彩 丰富 ， 视 觉 效果 非常 好 。 


CeI I”II>KI€WCIGT E ESHEIHTHIOIƏI@HZÍ,Iz ju l l l s s | 8 ° kLqLQLGgL..L l ku _Hk=GÁ s a 
蓝 色 (R:40,G:57,B:147) 紫色 (R:255,G:84,B:168) 浅 蓝 色 (R:164,G:228,B:255) 深 青色 (R:89,G:148,B:142) 


7.1.1 绘制 界面 1 背景 主体 


操作 步骤 
步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令 ， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 750 像 素 ，【 高 度 】 为 1334 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 ]】 É 编辑 蓝 色 (R: 40, G: 57, B: 147) 到 紫色 (R: 157, G: 85, B: 213) 
的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 冉 按钮 ， 在 画布 中 拖 动 填充 渐变 ， 如 图 7.2 所 示 ， 


步骤 03 ”选择 工具 箱 中 的 【钢笔 工具 】 敢 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 和 ”| 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 浅 蓝 色 (R: 214, G: 208, B: 255) ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 云彩 形状 的 图 形 ， 将 生成 一 个 
[形状 1】 图 层 ， 如 图 7.3 所 示 。 


872 ”填充 渐变 


图 7.3 ”绘制 图 形 


步骤 04 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 图 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 7.4 
所 示 。 


步骤 05 ”选择 工具 箱 中 的 【渐变 工具 】 É" 编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 央 按钮 ， 在 图 形 上 拖 
动 ， 隐 藏 部 分 图 形 ， 如 图 7.5 所 示 。 


图 7.4 添加 图 层 蒙 版 


图 7.5 F 2 F 


步骤 06 ”选择 工具 箱 中 的 【画笔 工具 】#， 在 【画笔 ) 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 为 20 像 素 ，【 间 距 】 更 
改 为 1000%， 如 图 7.6 所 示 。 


步骤 07 ”选中 【形状 动态 】 复 选 框 ,将 【大 小 拉 动 】 更 改 为 100%， 如 图 7.7 所 示 。 
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图 7.6 设置 画笔 笔尖 形状 
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图 7.7 ”设置 【形状 动态 】 参 数 


步骤 08 ”选中 【散布 】 复 选 框 ,将 【散布 】 更 改 为 1000%， 如 图 7.8 所 示 。 


步骤 09 ”选中 【平滑 】 复 选 框 ， 如 图 7.9 所 示 。 
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图 7.8 设置 【散布 】 参 数 
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图 7.9 ”选中 【平滑 】 复 选 框 
步骤 10 ” 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 SI 按钮 ， 新 建 一 个 【图 层 1】 图 层 。 


步骤 11 将 前 景色 更 改 为 日 色 ， 在 界面 项 部 区 域 单 击 或 涂抹 添加 图 像 ， 如 图 7.10 所 示 。 


图 7.10 ”添加 图 像 


步骤 12 在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 并 按钮 ， 在 菜单 中 选择 【外 发 光 】 命 
令 ， 在 弹出 的 对 语 框 中 将 【混合 模式 】 更 改 【 为 线性 减 淡 (添加 ) 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 紧 色 (R: 


238, G: 168, B: 255) ，【 大 小 】 更 改 为 38 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.11 所 示 。 
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图 7.11 设置 【外 发 光 】 参 数 


步骤 13 ”执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 7 草 \ 问 天 大 冒险 界面 \ 标 志 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 如 图 7.12 所 示 。 


步骤 14 在 【图 层 】 面 板 中 选中 【标志 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Pers, 在 菜单 中 选择 【 描 边 】 命 令 ， 
在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 10 像 素 ，【 颜 色 】 更 改 为 蓝 色 (R: 22, G: 77, B: 145) ， 完 成 之 后 单 击 【确定 】 按 
钮 ， 效 果 如 图 7.13 所 示 。 


图 7.12 添加 素材 


图 7.13 Z&264632 


步骤 12 在 【图 层 】 面 板 中 选中 【标志 】 图 层 ， 将 其 拖 全 面板 底部 的 【创建 新 图 层 】 Wink. 复制 一 个 【标志 拷贝 】 图 
层 ， 如 图 7.14 所 示 。 


步骤 16 选中 【标志 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 垂 
直 翻 转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.15 所 示 。 


图 7.14 复制 图 层 


图 7.15 ”交换 图 像 


步骤 17 在 【图 层 】 面 板 中 选中 【标志 】 图 层 ， 在 其 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 格 化 图 层 样 
=] 命令 ;再 单 击 面板 底部 的 【添加 图 层 蒙 版 】 EH 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 7.16 所 示 ， 


步骤 18 选择 工具 箱 中 的 【渐变 工具 】 _ 编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 El 按钮， 在 图 像 上 拖 
动 ， 隐 藏 部 分 图 像 ， 如 图 7.17 所 示 。 


图 7.16 添加 图 层 蒙 版 


图 7.17 ”隐藏 图 像 


步骤 19 ”选择 工具 箱 中 的 【画笔 工具 】< 只 ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 【混合 画笔 】 | 【交叉 排列 4】 笔 


， 如 图 7.18 所 示 。 


步骤 20 ” 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 图 按钮， 新建 一 个 【图 层 2】 图 层 . 


图 7.18 ”新 建 图 层 


步骤 21 ”将 前 景色 更 改 为 日 色 ， 在 适当 的 位 置 单 击 或 涂抹 添加 图 像 ， 如 图 7.19 所 示 。 


图 7.19 添加 图 像 


提示 与 技巧 


在 添加 图 像 之 后 ， 可 将 画笔 适当 旋转 ， 在 交叉 排 线 上 再 次 单 击 添加 图 像 。 


步 又 22 ”选择 工具 箱 中 的 【钢笔 工具 】 砍 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 :| 按 铀 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 浅 蓝 色 (R: 214, G: 208, B: 255) ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 不 规则 图 形 ， 将 生成 一 个 【 形 
状 2】 图 层 ， 如 图 7.20 所 示 ， 


步骤 23 ”在 【图 层 】 面 板 中 选中 【形状 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 EH 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 


7.21 所 泵 。 


过 


图 7.20 ”绘制 图 形 


步骤 24 ”选择 工具 箱 中 的 【渐变 工具 】 图 ， 编 辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 Ela, 在 图 形 上 拖 


， 


包 藏 部 分 图 形 ， 如 图 7.22 所 示 。 


图 7.21 添加 图 层 蒙 版 


图 7.22 ”隐藏 图 形 


人 


步骤 25 ”选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】|! 路 径 “| 按钮 ， 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 蓝 色 (R: 173, G: 161, B: 255) ，【 摘 边 】 更 改 为 无 ， 绘 制 一 个 不 规则 图 形 ， 将 生成 一 个 
【形状 3】 图 层 ， 如 图 7.23 所 示 。 


步骤 26 执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 售 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 7.24 所 示 。 


图 7.23 ”绘制 图 形 


图 7.24 创建 剪贴 蒙 版 


步骤 27 在 【图 层 】 面 板 中 选中 【形状 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 莹 版 】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
7.25 所 示 。 


步骤 28 选择 工具 箱 中 的 【渐变 工具 ]】 . 编辑 黑色 到 白色 的 浙 变 ， 单 击 选项 栏 中 的 【线性 渐变 】 冉 按钮 ， 在 图 形 上 拖 
， 隐 藏 部 分 图 形 ， 如 图 7.26 所 示 。 


图 7.25 ”添加 图 层 蒙 版 
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图 7.26 ”隐藏 图 形 


步骤 29 ”选中 【形状 3】 图 层 ， 在 画布 中 按 住 Alt 键 将 其 复制 数 份 ， 并 选择 工具 箱 中 的 【直接 选择 工具 】 R. 拖 动 部 分 图 形 
销 点 将 其 变形 ， 如 图 7.27 所 示 。 


图 7.27 复制 并 变换 图 形 
步骤 30 ”同时 选中 所 有 和 【形状 3】 相 关 的 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 山 】.。 


步骤 31 ”选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 界面 底部 绘制 一 个 
矩形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 7.28 所 示 。 


图 7.28 绘制 图 形 


步骤 32 ”在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 ËH 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
7.29 所 示 。 


步骤 33 ”选择 工具 箱 中 的 【画笔 工具 】 "á ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 
为 300 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 7.30 所 示 。 


图 7.29 ”添加 图 层 蒙 版 


图 7.30 ”设置 笔触 


步骤 34 ”将 前 景色 更 改 为 黑色 ， 人 在 图 像 部 分 区 域 涂 抹 将 其 隐藏 ， 如 图 7.31 所 示 。 


图 7.31 ”隐藏 图 像 


7.1.2 ”处 理 界 面 1 背景 细 市 
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步骤 01 ”选择 工具 箱 中 的 【钢笔 工具 】 必 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 。 按钮， 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 界面 底部 位 置 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 4】 图 层 ， 如 
图 7.32 所 示 . 


步骤 02 在 【图 层 】 面 板 中 选中 【形状 4】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 在 按钮， 在 菜单 中 选择 【渐变 三 加 ]】 命 


As 
Xo 


步骤 03 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 0, G: 120, B: 187) 到 青色 (R: 118, G: 223, B: 255), 
完成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 7.33 所 示 。 


图 7.32 ”绘制 图 形 


图 7.33 ”添加 渐变 
在 【图 层 】 面 板 中 选中 【形状 4】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Sl 按钮 上 ， 复 制 一 个 【形状 4 拷贝 】 
图 层 。 
双击 【形状 4 拷贝 】 图 层 样式 名 称 ， 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 青色 (R: 161, G: 250, B: 254) 到 青 
€, (R: 137, G: 179, B: 229) ，【 角 度 】 更 改 为 0， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 在 画布 中 将 图 形 向 上 移动 ， 如 图 7.34 所 


小 \。 


图 7.34 ”移动 图 形 


步骤 06 在 【形状 4】 图 层 名 称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 菜 蛙 中 选择 【转换 为 智能 对 象 】 命 令 ， 如 图 7.35 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【钢笔 工具 】 Z? ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】[ EÉ ”外 | 按钮， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 青色 (R: 138, G: 233, B: 253) ，【 描 边 】 更 改 为 无 ， 在 两 个 图 形 靠 左 侧 位 置 绘制 一 个 不 规则 图 
形 ， 将 生成 一 个 【形状 5】 图 层 ， 如 图 7.36 所 示 。 


图 7.35 ”转换 为 智能 对 象 


图 7.36 ”绘制 图 形 


选中 【形状 2】 图 层 ， 执 行 菜 单 栏 中 的 【图 层 】| 【创建 筋 巾 芝 版 】 人 命令 ， 为 当前 图 层 创 建 勇 贴 蒙 皮 ， 隐 藏 部 分 图 
像 ， 如 图 7.37 所 示 。 


图 7.37 ”创建 剪贴 蒙 版 
步骤 09 ”选中 【形状 5】 图 层 ， 将 图 形 复 制 数 份 ， 并 分 别 更 改 拷贝 图 层 中 图 形 的 颜色 ， 如 图 7.38 所 示 。 


步骤 10 ”同时 选中 所 有 和 【形状 4】、【 形 状 5】 相 关 的 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 湖 】。 


图 7.38 复制 图 形 


步骤 11 双击 【形状 4 拷贝 】 图 层 样 式 名 称 ， 在 弹出 的 对 话 框 中 选中 【内 友 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【 装 加 】,， 


【不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 日 色 ，【 大 小 】 更 改 为 25 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.39 所 示 。 
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图 7.39 设置 【内 发 光 】〗 参 数 


步骤 12 ”选择 工具 箱 中 的 【矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 棕色 (R: 137, G: 87, B: 99) ，【 描 边 ] 更 
改 为 无 ， 绘 制 一 个 和 矩形， 此 时 将 生成 一 个 【和 矩形 2】 图 层 ， 如 图 7.40 所 示 。 


步骤 13 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| Bf — 外 按 乌 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 灰色 (R: 160, G: 160, B: 160) ， 绘 制 一 个 不 规则 图 形 ， 将 生成 一 个 【 形 
状 6】 图 层 ， 如 图 7.41 所 示 。 


图 7.40 ”绘制 矩形 


图 7.41 ”绘制 图 形 


步骤 14 ”在 图 形 右 下 角 位 置 再 次 绘制 一 个 灰色 (R: 237, G: 237, B: 237) 不 规则 图 形 ， 将 生成 一 个 【形状 7】 图 层 ， 如 
图 7.42 所 示 。 


步骤 15 “执行 菜单 栏 中 的 【图 层 】| 【创建 剪贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 隐藏 部 分 图 形 ， 如 图 7.43 所 示 。 


图 7.42 ”绘制 图 形 


图 7.43 ”隐藏 部 分 图 形 


步骤 16 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路 径 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 深 青 色 (R: 89, G: 148, B: 142) ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 树叶 图 形 ， 将 生成 一 个 【形状 
8] 图 层 ， 如 图 7.44 所 示 . 


步骤 17 ”在 深 青色 图 形 项 部 位 置 册 次 绘制 一 个 日 色 积 雪 图 形 ， 将 生成 一 个 【形状 9】 图 层 ， 如 图 7.45 所 示 。 


图 7.44 ”绘制 树叶 


图 7.45 ”绘制 积 雪 


步骤 18 ”在 日 色 图 形 位 置 再 次 绘制 一 个 灰色 (R: 237, G: 237, B: 237) 阴影 图 形 ， 将 生成 一 个 【形状 10】 图 层 ， 如 图 
7.46 所 示 。 


步骤 19 执行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 合 令 ， 为 当前 图 层 创 建 剪 贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 7.47 所 示 。 


图 7.46 ”绘制 阴影 图 形 


图 7.47 ”隐藏 部 分 图 形 


步骤 20 同时 选中 【形状 10】、【 形 状 9】 及 【形状 8】 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【树叶 和 


步骤 21 选中 【树叶 和 积 雪 】 组 ， 将 其 向 上 移动 复制 两 份 ， 并 分 别 将 两 个 拷贝 图 形 缩小 ， 如 图 7.48 所 示 。 


步骤 22 将 最 上 方 的 【树叶 和 积 雪 拷 贝 2】 组 展开 ， 选 中 【形状 10】 及 【形状 9】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变 
换 】 命 令 ， 将 图 像 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.49 所 示 。 


图 7.48 复制 图 形 


图 7.49 ”缩小 图 形 


步骤 23 ”同时 选中 【树叶 和 积 雪 拷贝 2】、【 树 叶 和 积 雪 拷贝 】、【 树 叶 和 积 雪 】 组 及 【形状 7】、【 形 状 6】、【 和 矩形 2】 
图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 树 和 积 雪 】， 如 图 7.50 所 示 。 


步骤 24 ”选中 【 树 和 积 雪 】 组 ， 将 图 像 复 制 多 份 ， 并 将 部 分 图 像 缩 小 ， 如 图 7.51 所 示 。 


图 7.50 j$E] Z 2 28 


图 7.51 复制 图 像 并 缩小 
步骤 25 部 分 组 ， 适 当 降 低 其 不 透明 度 ， 如 图 7.52 所 示 。 


图 7.52 ”降低 不 透明 度 


步骤 26 ”选择 工具 箱 中 的 【钢笔 工具 】 砍 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】[ 监 色 _ ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 湖面 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 11】 图 层 ， 如 图 7.53 所 
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步骤 28 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 日 色 到 浅 青色 (R: 214, G: 252, B: 254) ，【 角 厦 】 更 改 为 0， 完 成 之 后 
单 击 【 确 定 】 按 钮 ， 如 图 7.54 所 示 。 


图 7.53 ”绘制 图 形 


图 7.54 添加 渐变 


7.1.3 制作 界面 1 完整 界面 


添加 高 光 
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制作 副 按钮 


步骤 01 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 136, G: 202, B: 112) , DE 
边 】 更 改 为 绿色 (R: 88, G: 147, B: 63) ，【 寓 度 】 更 改 为 2 点 ，【 半 径 】 更 改 为 30 像 素 ， 绘 制 一 个 圆 角 起 形 ， 此 时 将 生成 
一 个 【 圆 角 和 矩形 1】 图 层 ， 如 图 7.55 所 示 。 


步骤 02 在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 at, £hl|— [IBI£83E 
形 1 拷贝 】 图 层 ， 如 图 7.56 所 示 。 


图 7.55 ”绘制 图 形 


图 7.56 复制 图 层 
步骤 03 将 【 圆 角 算 形 1 拷贝 】 图 层 中 图 形 摘 边 【宽度 】 更 改 为 1， 再 适当 缩小 图 形 高 度 ， 如 图 7.57 所 示 。 


步骤 04， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 套 按 钮 ， 在 菜单 中 选择 【 源 


s=) a. 


步骤 05 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 (R: 183, G: 254, B: 160) 到 浅 绿色 (R: 248, G: 255, B: 
245) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.58 所 示 。 


图 7.57 ”缩小 图 形 


图 7.58 添加 渐变 


步 又 06 “选择 工具 箱 中 的 【 贺 角 矩形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 30, G: 104, B: 141) , 
【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 30 像 素 ， 在 圆 角 矩 形 下 方 再 次 绘制 一 个 圆 角 和 矩 形 ， 此 时 将 生成 一 个 【 圆 角 矩形 2】 图 层 ， 如 
图 7.59 所 示 。 


步骤 07 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 m 在 适当 位 置 添加 文字 (Myriad Pro Semibold) ， 如 图 7.60 所 示 。 


图 7.59 2%#JE] # EJ 


图 7.60 添加 文字 


步骤 08 ”在 【图 层 】 面 板 中 选中 【login】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 六 按钮 ， 在 菜单 中 选择 【投影 】 命 令 。 


步骤 09 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 日 色 ，【 距 离 】 
更 改 为 2 像素 ，【 大 小 】 更 改 为 1 像素 ， 如 图 7.61 所 示 。 
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图 7.61 设置 【投影 】 参 数 


步骤 10 ”在 【图 层 】 面 板 中 选中 【GUESTS】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 如 按钮 ， 在 菜单 中 选择 【渐变 午 


加 】 命 令 。 
步骤 11 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【和 柔 范 】，【 渐 变 】 更 改 为 黑色 到 日 色 ， 如 图 7.62 所 示 。 


步骤 12 ”选中 【投影 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 绿色 (R: 109, G: 207, B: 52) ， 
【不 透明 度 】 更 改 为 100%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 和 确定】 按钮， 如 图 7.63 所 示 。 
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图 7.63 ”设置 【投影 】 参 数 


步 又 13 ”选择 工具 箱 中 的 【钢笔 工具 】 Z? ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】[ 路 色 引 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 蓝 色 (R: 46, G: 135, B: 180) ，【 描 边 】 更 改 为 无 ， 在 湖面 左下 角 位 置 绘制 一 个 鱼 图 形 ， 如 图 
7.64 所 示 。 


步骤 14 ”选中 鱼 图 形 ， 在 画布 中 按 住 Alt+Shift 组 合 键 向 右 侧 平移 复制 ， 再 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 , 单 
击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.65 所 示 。 


图 7.64 ”绘制 图 形 


图 7.65 复制 并 变换 图 形 


步骤 15 单 击 【 图 层 】 面 板 底 部 的 【创建 新 图 层 】 "| 按 钮 ， 新 建 一 个 【图 层 3】 图 层 ， 如 图 7.66 所 示 . 


步骤 16 选择 工具 箱 中 的 【画笔 工具 】 <, 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔 触 ， 将 【大 小 】 更 改 
为 350 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 7.67 所 示 。 
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图 7.66 ”新 建 图 层 


图 7.67 设置 笔触 


步骤 17 ”将 前 景色 更 改 为 日 多， 在 按钮 上 方 区 域 单 击 添加 图 像 ， 如 图 7.68 所 示 。 


GUESTS 


图 7.68 添加 图 像 


7.1.4 制作 界面 2 状态 元 素 


步骤 01 执行 菜单 栏 中 的 【文件 】 |【 打 开 】 命 令 ， 选 择 “调用 素材 \ 第 7 章 \ 闽 关 大 冒险 界面 \ 关 卡 背 景 .jpg” 文 件 ， 单 击 【 打 


开 】 按 钮 ， 如 图 7.69 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【钢笔 工具 】 砍 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 笃 引 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 界面 右上 角 绘 制 一 个 云 呆 图 形 ， 将 生成 一 个 【形状 1]】 图 层 ， 如 图 7.70 所 


小 \。 


步骤 03 将 【形状 1】 图 层 【 不 透明 度 】 更 改 为 30%。 


图 7.69 ”打开 素材 


图 7.70 “绘制 图 形 


步骤 04， 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 总 按钮 ， 在 菜单 中 选择 【外 发 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 滤 色 】，【 不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 日 色 ，【 大 小 】 更 改 为 20 
像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.71 所 示 。 
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图 7.71 设置 【外 发 光 】 参数 


步骤 05 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 10, G: 71, B: 115) , DE 
边 】 更 改 为 晶 色 ，【 免 度 】 更 改 为 5 点 ，【 半 径 】 更 改 为 10 像 素 ， 绘 制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 
图 7.72 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【椭圆 工具 】 惫 ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 200, G: 125, B: 243) ，【 描 边 】 
更 改 为 白色 ，【 宽 度 】 更 改 为 5 点 ， 在 圆 角 矩形 右 侧 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 
7.73 所 示 。 


图 7.72 ”绘制 圆 角 拢 形 


图 7.73 22 h] uE [B] 


步骤 07， 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 PxE24n, #rszeerhisie (Wi2=#5DD] 


人 人 
RD Zo 


步骤 08 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 革 加 】，【 不 透明 度 】 更 改 为 80%，【 渐 变 】 更 改 为 日 色 到 日 色 ,， 将 
第 2 个 日 色色 标的 【不 透明 度 】 更 改 为 0%，【 样 式 】 更 改 为 【 径 向 】， 完 成 之 后 蛙 击 【确定 】 按 钮 ， 如 图 7.74 所 示 。 
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图 7.74 JE [3 E ep] 参数 


步骤 09， 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 254, G: 226, B: 126) , D 


边 】 更 改 为 无 ，【 半 径 】 为 5 像素 ，【 宽 度 】 更 改 为 5 点 ， 在 正 圆 位 置 绘 制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 算 形 2】 图 层 ， 
如 图 7.75 所 示 。 
步骤 


3240 ”选中 【 贺 角 和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【 圆 角 和 矩形 2 拷贝 】 图 层 。 


步骤 11 选中 【 贺 角 起 形 4 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 
选择 【 顺 时 针 旋 转 90 度 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.76 所 示 。 


图 7.75 2#JE] # £E3 


图 7.76 ”变换 图 形 


步骤 12 ”同时 选中 除 【 育 景 】 及 【形状 1】 之 外 的 所 有 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【状态 】，， 
如 图 7.77 所 示 。 


步骤 13 选中 【状态 】 组 ， 在 画布 中 将 图 像 向 右 侧 平移 复制 两 份 ， 如 图 7.78 所 示 。 


图 7.77 将 图 技 编 组 


图 7.78 复制 图 像 


步骤 14 执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 7 草 \ 问 天 大 冒险 界面 \ 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 对 应 的 状态 图 形 位 置 并 适当 缩小 ， 如 图 7.79 所 示 。 


图 7.79 添加 素材 


箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 适当 位 置 添加 文字 (Myriad Pro Semibold) ， 如 图 7.80 所 示 。 


图 7.80 ”添加 文字 


7.1.5 ”制作 界面 2 主体 
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步骤 01 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 164, G: 228, B: 255) , DB 


边 】 更 改 为 白色 ，【 宽 度 】 为 10 点 ，【 半 径 】 更 改 为 90 像素 ， 绘 制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 矩形 3】 图 层 ， 如 图 
7.81 所 示 。 


步骤 02 选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| Bf :| 按 铀 ， 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 


步骤 03 ”在 圆 角 抱 形 顶 部 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 2】 图 层 ， 将 其 移 全 【 圆 角 息 形 3】 下 方 ， 如 图 7.82 所 


步骤 04 ”选择 工具 箱 中 的 【钢笔 工具 】 区 儿 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】[ EÉ ”| 按钮， 在 弹出 的 选项 中 选择 【 形 


状 】， 将 【填充 】 更 改 为 蓝 色 (R: 150, G: 200, B: 237) ，【 摘 边 】 更 改 为 无 。 


图 7.81 绘制 贺 角 矩形 


图 7.82 ”绘制 图 形 


步骤 05 ”在 刚才 绘制 的 图 形 左 侧 再 次 绘制 一 个 不 规则 图 形 ， 生 成 一 个 【形状 3】 图 层 ， 将 其 移 至 【形状 2】 图 层 上 方 ， 如 图 
7.83 所 示 。 


步骤 06 ”执行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 合 令 ， 为 当前 图 层 创 建 剪 贴 蒙 版 ， 隐 藏 部 分 图 形 ， 如 图 7.84 所 示 。 


图 7.83 ”绘制 图 形 


图 7.84 创建 剪贴 蒙 版 


步骤 07， 在 【图 层 】 面 板 中 选中 【形状 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
7.85 所 示 ， 


步骤 08 ”选择 工具 箱 中 的 【渐变 工具 】 腹 |， 编辑 黑 色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 Elsa, 在 图 形 上 拖 
动 ， 隐 藏 部 分 图 形 ， 如 图 7.86 所 示 。 


图 7.85 Z&Jo E] E £ y. 
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图 7.86 ”隐藏 图 形 


步 又 09 ”选中 【形状 3】 图 层 ， 在 画布 中 按 住 Alt 键 将 其 复制 数 份 ; 选择 工具 箱 中 的 【直接 选择 工具 】 全 ， 拖 动 生成 的 拷贝 
图 形 钉 点 ， 将 其 适当 变形 ， 如 图 7.87 所 示 。 


图 7.87 ”复制 并 变换 图 形 


步骤 10 ”选择 工具 箱 中 的 【 圆 角 算 形 工具 】 ə 在 选项 栏 中 将 【填充 】 更 改 为 监 色 (R: 29, G: 162, B: 255), DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 0 像素， 绘制 一 个 圆 角 和 窍 形 ， 此 时 将 生成 一 个 【 圆 角 算 形 4】 图 层 ， 如 图 7.88 所 示 。 


步骤 11 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 4】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 4 拷贝 】 图 层 ， 如 图 7.89 所 示 。 


图 7.88 2 %J E] # EJ 


图 7.89 复制 图 层 


步骤 12 ”选中 【 贺 角 和 窍 形 4 拷 贝 】 图 层 ， 将 其 图 形 【 填 充 】 更 改 为 浅 监 色 (R: 235, G: 250, B: 255) ; 再 按 Ctrl+T 组 合 
键 对 其 执行 【自由 变换 】 人 命令， 将 图 形 等 比 缩 小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.90 所 示 。 


图 7.90 ”缩小 图 形 


步骤 13， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 4 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 立 按 钮 ， 在 菜单 中 选择 【内 
上 发光】 命令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 70%，【 颜 色 】 更 改 为 灰色 (R: 
197, G: 197, B: 197) ，【 大 小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.91 所 示 。 
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图 7.91 设置 【内 发 光 】 参 数 


步骤 14 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 时 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
30 像 素 ， 按 住 shift 键 绘制 一 个 圆 角 夫 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 ?】 图 层 ， 如 图 7.92 所 示 。 


步骤 15 按 Ctrl+Alt+T 组 合 键 对 图 形 执行 变换 复制 命令 ， 当 出 现 变 形 框 之 后 ， 将 图 形 向 右 侧 平 黎 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 7.93 所 示 。 


图 7.92 2#JE] # EJ 


图 7.93 ”变换 复制 


步骤 16 按 住 Ctrl+Alt+shift 组 合 键 的 同时 按 T 键 多 次 ， 执 行 多 重复 制 售 令 ， 将 图 形 再 复制 两 份 ， 将 生成 【 圆 角 窍 形 ?】、 
【 圆 角 矩形 ?拷贝 】、【 圆 角 窟 形 5 拷 贝 2】 及 【 圆 角 息 形 5 拷贝 3】 图 层 ， 如 图 7.94 所 示 。 


图 7.94 ”多 重复 制 


步骤 17， 选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 前 三 个 矩形 位 置 给 
制 一 个 矩形 ， 此 时 将 生成 一 个 【 算 形 1】 图 层 ， 将 其 移 全 【图 角 起 形 5 拷 贝 3】 图 层 下 方 ， 如 图 7.95 所 示 。 


图 7.95 ”绘制 矩形 


步骤 18 同时 选中 【矩形 1】、【 圆 角 起 形 2 拷 贝 2】 及 【 圆 角 起 形 5 拷贝 】、【 贺 角 赴 形 ?】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合 
并 ， 此 时 将 生成 一 个 【 息 形 1】 图 层 ， 将 【 窍 形 1】 图 层 中 图 形 【 填 序 】 更 改 为 蓝 色 (R: 154, G: 184, B: 248) 。 


步骤 19 ”在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疯 按钮 ， 在 菜单 中 选择 【 描 边 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 8 像素 ，【 填 充 类 型 】 更 改 为 【渐变 】，【 渐 变 】 更 改 为 白色 到 青色 (R: 190, G: 


242, B: 255) ， 如 图 7.96 所 示 。 


图 7.96 设置 【 描 边 】 参 数 


在 绘制 图 形 时 ， 黑 色 更 加 容易 分 辨 ， 无 论 设置 为 哪 种 颜色 ， 只 需要 在 后 期 合并 图 层 时 更 改 即 可 。 


步骤 20 ”选中 【内 发 光 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 改 为 蓝 色 (R: 
30, G: 57, B: 116) ，【 大 小 】 更 改 为 5 像素 ， 如 图 7.97 所 示 。 
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图 7.97 ”设置 【内 发 光 】 参 数 


步骤 21 选中 【外 发 光 】 复 选 框 ， 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 80%，【 颜 色 】 更 改 为 深蓝 
(R: 7, G: 20, B: 46) ，【 大 小 】 更 改 为 20 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.98 所 示 。 
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图 7.98 设置 【外 发 光 】 参 数 


步骤 22 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 127, G: 149, B: 225) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 20 像 素 ， 在 刚才 绘制 的 图 形 左 侧 位 置 按 住 Shift 键 绘制 一 个 圆 角 矩形 ， 此 时 将 生成 一 个 【 圆 角 和 矩 
形 ?】 图 层 ， 如 图 7.99 所 示 。 


图 7.99 绘制 圆 角 珑 形 


步骤 23， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 5】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 其 按钮 ， 在 菜单 中 选择 【内 发 光 ) 


命令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 30%，【 颜 色 】 更 改 为 蓝 色 (R: 30, G: 
57, B: 116) ，【 大 小 】 更 改 为 6 像素 ， 完 成 之 后 日 击 【确定 】 按 钮 ， 如 图 7.100 所 示 。 
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图 7.100 ”设置 【内 发 光 】〗 参数 


步骤 24 执行 菜单 栏 中 的 【文件 】|【 打 开 )】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 章 \ 问 关 大 冒险 界面 \ 脚 站 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 刚才 绘制 的 圆 角 答 形 位 置 并 缩小 ， 并 更 改 其 【填充 】 为 葛 色 (R: 71, G: 84, B: 207) , 
如 图 7.101 所 示 。 


图 7.101 添加 素材 


步骤 25 “在 【图 层 】 面 板 中 选中 【 脚 丫 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疯 按钮 ， 在 菜单 中 选择 【内 发 光 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 葛 色 (R: 30, G: 
57, B: 116) ，【 大 小 】 更 改 为 6 像素 ， 如 图 7.102 所 示 。 
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图 7.102 ”设置 【内 发 光 】 参 数 


步骤 26 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【 蔷 加 】，【 颜 色 】 更 改 为 日 色 ，【 不 透明 度 】 更 改 为 100%，【 距 
离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.103 所 示 。 
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图 7.103 ”设置 【投影 】 参 数 


步骤 27 ”同时 选中 【 脚 丫 】 及 【 圆 角 起 形 ?5】 图 层 ， 在 画布 中 按 住 At+ shift 组 合 键 疝 右 侧 拖 动 ， 将 图 形 复制 两 份 ， 如 图 


7.104 所 示 。 


图 7.104 复制 图 形 


步骤 28 同时 选中 所 有 与 【 脚 丫 】 及 【 圆 角 矩形 5】 相 关 的 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【 脚 
Y1. 

步骤 29 ”选中 【 圆 角 矩形 5 拷贝 3】 图 层 ， 将 其 移 至 所 有 图 层 上 方 ， 再 将 其 图 层 名 称 更 改 为 【上 锁 关 卡 】， 如 图 7.105 所 示 。 
步骤 30 ”选中 【 圆 角 矩形 5 拷贝 3】 图 层 
改 为 紫色 (R: 181, G: 43, B: 165) , 


， 在 选项 栏 中 将 【填充 】 更 改 为 红色 (R: 210, G: 110, B: 136) , 
【宽度 】 更 改 为 5 点 ， 如 图 7.106 所 示 。 


[Rau] së 


图 7.105 更改 图 层 名 称 


图 7.106 添加 描 边 


步骤 31 在 【图 层 】 面 板 中 选中 【上 锁 关 卡 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 拷贝 图 层 ， 
将 其 图 层 名 称 更 改 为 【 锁 】， 如 图 7.107 所 示 。 


步骤 32 ”选中 【 锁 】 图 层 ， 在 选项 栏 中 将 【 填 元 】 更 改 为 无 ，【 摘 边 】 更 改 为 黑色 ，【 寓 度 】 更 改 为 8 点 ; 再 近 Ctrl+T 组 合 
键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.108 所 示 。 
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图 7.107 复制 图 层 


图 7.108 ”缩小 图 形 


步骤 33 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 绘 制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 矩形 6】 图 层 。 


步骤 34 选中 【 贺 角 起 形 6】 图 层 ， 人 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 摘 边 】 更 改 为 黑色 ，【 免 厌 】 更 改 为 10 点 ，【 半 
径 】 更 改 为 50 像 素 ， 在 圆 角 窍 形 上 方 再 次 绘制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 7】 图 层 ， 如 图 7.109 所 示 。 


图 7.109 ”绘制 图 形 


步骤 35 ”同时 选中 【 锁 】、【 圆 角 窍 形 6】 及 【 圆 角 起 形 7】 图 层 ， 按 Ctrl+E 组 合 键 将 图 层 合 并 ， 将 生成 的 图 层 名 称 更 改 为 
【框架 锁 】，。 


步骤 36， 在 【图 层 】 面 板 中 选中 【框架 锁 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疙 按钮 ， 在 荣 单 中 选择 【 描 边 】 命 
， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 2 像素 ，【 颜 色 】 更 改 为 紫色 (R: 181, G: 43, B: 165) ， 如 图 7.110 所 示 。 


4> 


步骤 37 选中 【渐变 埃 加 】 复 选 框 ， 将 【渐变 】 更 改 为 紫色 (R: 239, G: 128, B: 249) 到 紫色 (R: 254, G: 
229, B: 250) ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.111 所 示 。 
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图 7.110 ”设置 【 描 边 】 参 数 
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图 7.111 设置 【 渐 交 又 加 】 参 


步骤 38 ”同时 选中 【框架 锁 】 及 【上 锁 关卡 】 图 层 ， 在 画布 中 将 其 复制 数 份 ， 如 图 7.112 所 示 。 


步骤 39， 选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 133, G: 215, B: 252) , D 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 20 像 素 ， 绘 制 一 个 圆 角 和 窟 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 6】 图 层 ， 如 图 7.113 所 示 。 


图 7.112 复制 图 形 


图 7.113 绘制 图 形 


步骤 40 ”选择 工具 箱 中 的 【 横 排 文 字 工具 】 T ， 在 圆 角 矩形 位 置 添 加 文字 (Myriad Pro Semibold) ， 如 图 7.114 所 示 。 


步骤 41 选择 工具 箱 中 的 【 圆 角 息 形 工具 】 ə M 在 选项 栏 中 将 【填充 】 更 改 为 蛇 色 (R: 255, G: 98, B: 177) , DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 100 像 素 ， 绘 制 一 个 圆 角 矩 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 7】 图 层 ， 如 图 7.115 所 示 。 


图 7.114 添加 文字 
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图 7.115 ”绘制 圆 角 矩形 


步 又 42， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 7】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按钮 ， 在 菜单 中 选择 【渐变 赦 
加 】 命 令 。 


步骤 43 ”在 弹出 的 对 话 框 中 将 【 淘 变 】 更 改 为 紫色 (R: 255, G: 84, B: 168) 到 紧 色 (R: 254, G: 138, B: 175) , 
完成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.116 所 示 。 
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图 7.116 ”设置 【渐变 登 加 】 参数 


步骤 44 选中 【内 友 光 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 堵 加 】， 【不 透明 度 】 更 改 为 100%， 【颜色 】 更 改 为 日 色 ， 
【大 小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.117 所 示 。 
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图 7.117 设置 【内 发 光 】〗 参数 


步骤 46 ”在 【图 层 】 面 板 中 选中 【START】 图 层 ， 单 击 面板 床 部 的 【添加 图 层 样式 】 癌 按钮 ， 在 菜单 中 选择 【 描 边 】 命 
令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 6 像素 ，【 颜 色 】 更 改 为 紫色 (R: 220, G: 57, B: 138) ， 完 成 之 后 单 击 【确定 】 
按钮 ， 效 果 如 图 7.119 所 示 。 


图 7.118 添加 文字 


After the start of your choice hai 
the time is 3 minutes 


图 7.119 ”添加 描 边 


步骤 47 ”执行 菜单 壬 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 7 草 \ 问 天 大 冒险 界面 \ 心 形 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 界面 适当 位 置 并 缩小 ， 如 图 7.120 所 示 。 


步骤 48 选中 【 心 形 】 图 层 ， 按 Ctrl+Alt+T 组 合 键 癌 右 侧 拖 动 ， 将 其 变换 复制 一 份 ， 完 成 乙 后 按 Enter 键 确认 ; 再 按 Ctrl+D 
组 合 键 数 次 将 其 复制 多 份 ， 如 图 7.121 所 示 。 


图 7.120 “添加 素材 


图 7.121 复制 图 形 


步骤 49 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 189, G: 116, B: 247) , [38323] 
更 改 为 8 点 ， 按 住 shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【 李 圆 2】 图 层 ， 如 图 7.122 所 示 。 


步骤 50 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 疼 按钮， 在 菜单 中 选择 【渐变 亚 加 】 命 


以 
Xo 


步骤 ?1 ”在 弹出 的 对 话 框 中 将 【 淘 变 】 更 改 为 日 色 到 日 色 ， 将 第 2 个 渐变 色 标的 【不 透明 度 】 更 改 为 0%，【 样 式 】 更 改 为 
【 径 向 】， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.123 所 示 。 


图 7.122 ”绘制 正 


图 7.123 ”添加 渐变 


步骤 ?2 ”选择 工具 箱 中 的 【 圆 角 算 形 工具 】 ə frislrhi$s DB] SEK E66, [ha] sErr7J2s, [M"É4€] SEPXUS 
50@6&#s, (rIE[8Mu Ea Ze l|— IIS 2EFZ, HrRPSë4Epk— 4 (IEIF8BEER/8] El, RlES7.124FTr=<, 


步骤 53 ”选中 【 贺 角 和 矩形 8】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 
文本 框 中 输入 45， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.125 所 示 。 


图 7.124 ”绘制 圆 角 矩形 


图 7.125 ”旋转 图 形 


步骤 54 在 【图 层 】 面 板 中 选中 【 圆 角 矩形 8】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 atr, £hl|— [IBI£83E 
形 8 拷 贝 】 图 层 。 


步骤 ?5 ”选中 【 圆 角 息 形 8 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 
选择 【水 平 翻转 】 命 令 ， 对 图 形 进行 水 平 翻 转 ， 完 成 之 后 按 Enter 键 确认 ， 这 样 就 完成 了 效果 的 制作 ， 最 终 效 果 如 图 7.126 所 示 。 


uwa... 


图 7.126 最 终 效 果 


7.2 ”动物 卡 脾 游戏 界面 设计 


设计 构思 


本 例 讲 解 制 作 动 物 卡 牌 游 戏 界面 ， 该 界面 在 制作 过 程 中 以 动物 图 像 为 元 素 ， 将 整体 画 风 与 之 相 匹 配 ， 表 现 出 很 强 的 主题 特 
征 。 本 例 草图 及 最 终 效果 如 图 7.127 所 示 。 


level Gold time 


16:00 


10 26 


图 7.127 最 终 效 有 果 
难 易 指数 : krik k k x< 
' 素材 位 置 : 调用 素材 \ 第 7 章 \ 动 物 卡 牌 游戏 界面 
“ 案例 位 置 : 源 文件 \ 第 7 章 \ 动 物 卡 牌 游戏 开始 界面 .psd、 动 物 卡 牌 游 戏 状 态 界 面 .psd 
` 视频 位 置 : 视频 教学 \7.2 动 物 卡 牌 游戏 界面 设计 .avi 


重点 分 解 


LLA 


level Gold time 


10 26 16:00 


主 面板 装饰 星星 


以 蓝 色 作为 主体 色调 ， 以 绿色 、 黄 色 等 颜色 作为 辅助 色 ， 整 个 游戏 画面 色彩 十 分 出 色 。 


ES IE 
蓝 色 (R:131,G:210,B:229) 黄色 (R:248,G:226,B:87) 绿色 (R:66,G:161,B:58) 


7.2.1 ”处理 界面 1 背景 


制作 放射 


操作 步 又 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 人 新建】 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 1334 像 素 ，【 局 度 】 为 750 像 素 ， 


【分 辨 率 】 为 72 像 素 / 瑞 十， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 央 ， 编 辑 蓝 色 (R: 167, G: 236, B: 255) 到 蓝 色 (R: 75, G: 196, B: 
226) 的 渐变 ， 单 击 选 项 栏 中 的 【 径 向 渐变 】 轩 按钮 ， 在 画布 中 从 中 间 向 右上 角 方向 拖 动 填充 渐变 ， 如 图 7.128 所 示 。 


图 7.128 填充 渐变 


步骤 03， 选择 工具 箱 中 的 【和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 画布 左 侧 绘制 一 个 
矩形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 7.129 所 示 。 


步骤 04 ”选择 工具 箱 中 的 【路 径 选择 工具 】 上 入 ， 选 中 矩形 ， 按 Ctrl+Alt+T 组 合 键 将 矩形 向 右 侧 平移 复制 一 份 ， 如 图 7.130 所 


| | 
Z 
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图 7.129 ”绘制 图 形 


图 7.130 ”变换 复制 


步骤 05 按 住 Ctrl+Alt+shift 组 合 键 的 同时 按 T 键 多 次 ， 执 行 多 重复 制 命令 ， 将 图 形 复制 多 份 ， 如 图 7.131 所 示 。 


图 7.131 多重 复制 


步骤 06 执行 茉 单 栏 中 的 【 滤 镜 】|【 扭 曲 】|【 极 举 标 】 命 令 ， 在 弹出 的 对 语 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 话 
框 中 选中 【平面 坐标 到 极 坐标 】 单 选 按钮 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 /7.132 所 示 。 


图 7.132 ”添加 极 坐标 


步骤 07， 选 择 工具 箱 中 的 【多 边 形 套 索 工具 】 器 ， 在 图 像 底 部 位 置 绘制 一 个 不 规则 选区 ， 以 选中 部 分 图 像 ， 按 Delete 键 将 
选区 中 的 图 像 删 除 ， 完 成 之 后 按 Ctrl+ D 组 合 键 取 消 选 区 ， 如 图 7.133 所 示 。 


步骤 08 ”在 图 像 项 部 绘制 一 个 选区 ， 以 选中 顶部 两 个 放射 图 像 ， 如 图 7.134 所 示 。 


图 7.133 ”删除 图 像 


图 7.134 ”绘制 选区 
执行 菜单 栏 中 的 【图 层 】|【 新 建 】|【 通 过 拷贝 的 图 层 】 命 令 ， 此 时 将 生成 一 个 【图 层 1】 图 层 ， 如 图 7.135 所 示 。 


选中 【图 层 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 谷 令 ， 单 击 鼠 标 石 键 ， 从 弹出 的 快捷 荣 音 中 选择 【 垂 
直 翻 转 】 命 令 ， 完 成 乙 后 按 Enter 键 确认 ， 将 图 像 向 下 移动 ， 如 图 7.136 所 示 。 
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图 7.135 ”通过 拷贝 的 图 层 


图 7.136 ”变换 图 像 


步骤 11 同时 选中 【图 层 1】 及 【矩形 1】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 此 时 将 生成 一 个 【图 层 1】 图 层 。 


步骤 12 ”在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 Il 按钮 ， 为 其 添加 图 层 蒙 版 。 


步骤 13 ”选择 工具 箱 中 的 【渐变 工具 】 央 |， 编 辑 白色 到 黑色 的 渐变 


， 隐 藏 部 分 图 像 ， 如 图 7.137 所 示 。 


， 单 击 选项 栏 中 的 【 径 向 渐变 】 和 按钮 ， 在 图 像 上 拖 


图 7.137 ”隐藏 图 形 


7.2.2 ”制作 界面 1 控制 面板 


1 < 一 一 一 一 一 -制作 星 形 


level Gold 添加 数字 
信息 

绘制 控制 
按钮 


控制 面板 


步骤 01 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
100 像 素 ， 绘 制 一 个 圆 角 丰 形 ， 此 时 将 生成 一 个 【 圆 角 目 形 1】 图 层 ， 如 图 7.138 所 示 。 


图 7.138 


绘制 圆 角 珑 形 


图 7.139 ”删除 锚 点 


步骤 03 ”分 别 选 择 工具 箱 中 的 【转换 点 工具 】 |N 及 【直接 选择 工具 】 Rh. 拖 动 销 氮 将 其 变形 ， 如 图 7.140 所 示 。 


` 


步骤 04 ”以 同样 的 方法 在 圆 角 和 矩形 右 侧 位 置 图 形 销 点 上 单 击 将 其 删除 ， 并 将 其 变形 ， 如 图 7.141 所 示 。 


L. . ` | 


图 7.140 ”将 图 形变 形 


图 7.141 j+ n) 2 


步骤 05 HM 2nesB4=rRB [s24F] | JF] p<, 选择 “调用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 星 形 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 图 形 顶 部 并 缩小 ， 如 图 7.142 所 示 。 


步骤 06 ”在 【图 层 】 面 板 中 选中 【 星 形 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【 星 形 拷贝 】 图 
层 ， 如 图 7.143 所 示 。 


图 7.142 ”添加 素材 


图 7.143 ”复制 图 层 


步骤 07 选中 【 星 形 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 像 等 比 缩小 并 适当 旋转 ， 完 成 之 后 按 Enter 
键 确认 ， 如 图 7.144 所 示 。 


步骤 08 ”选中 【 星 形 】 图 层 ， 在 画布 中 按 住 Alt+Shift 组 合 键 向 右 侧 拖 动 复 制图 形 ， 如 图 7.145 所 示 。 


图 7.144 ”变换 图 形 


图 7.145 复制 图 形 


步骤 09 ”在 【图 层 】 面 板 中 选中 【 星 形 拷贝 2】 图 层 ， 单 击 面板 上 方 的 【锁定 透明 像素 】 图 按钮 ， 锁 定 透明 像素 ， 将 图 像 
填 宛 为 晶 色 ， 填 元 完 成 之 后 再 次 单 击 此 按钮 解除 锁定 ， 如 图 7.146 所 示 。 


INHHHIHIHI 
图 7.146 锁定 透明 像素 并 填充 颜色 


步骤 10 在 【图 层 】 面 板 中 选中 【 星 形 拷贝 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 fx 按钮 ， 在 菜单 中 选择 【 摘 边 】 
命令 ， 在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 8 像素 ，【 颜 色 】 更 改 为 灰色 (R: 224, G: 224, B: 224) ， 完 成 之 后 单 击 【 确 
定 】 按 钮 ， 如 图 7.147 所 示 。 
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图 7.147 设置 【 描 边 】 参 数 


步骤 11 选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 32, G: 126, B: 177) ，【 描 边 】 


更 改 为 无 ， 在 面板 左下 角 位 置 按 住 sShift 键 绘制 一 个 正 贺 图形， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 7.148 所 示 。 


步骤 12 将 正 圆 向 右 侧 平 移 复 制 两 份 ， 如 图 7.149 所 示 。 


图 7.148 ”绘制 正 圆 


图 7.149 复制 图 形 


步骤 13 ”执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 正 圆 位 置 并 适当 缩小 ， 如 图 7.150 所 示 。 


图 7.150 ”添加 素材 


步骤 14， 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按 钮 ， 在 菜单 中 选择 【投影 】 命 


少 


步骤 15 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 深 监 多 (R: 8, G: 53, B: 78) ，【 不 透明 
度 】 更 改 为 30%，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 0 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.151 所 示 。 


l 


一 539 


memz z  _ uma 一 一 一 
着 明朗 (OF 一 x | 新 建 样式 {W).… 


角度 人 (Í) É [ ) 使 用 全 局 光 1G) 
扩展 (RE — 0 |% = 


Mi 8 5a(V) 


”回国 层 控 空 投影 (U) 
识 置 为 默认 值 | | 槛 位 为 点 认 值 


图 7.151 设置 【投影 】 参 数 


步骤 16 在 【 顶 圆 1】 图 层 名 称 上 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 【拷贝 图 层 样 式 】 命 令 ， 同 时 选中 【 顶 圆 1 拷 
贝 】 及 【椭圆 1 拷贝 2】 图 层 ， 在 图 层 名 称 上 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 菜单 中 选择 【粘贴 图 层 样式 】 命 令 ， 如 图 7.152 所 示 。 


图 7.152 ”拷贝 并 粘贴 图 层 样 式 


步骤 17 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 画布 适当 位 置 添加 文字 (Calibri Bold) ， 如 图 7.153 所 示 。 


level Gold time 


10 26 16:00 


图 7.153 ”添加 文字 
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步骤 18 ”选择 工具 箱 中 的 【多 边 形 工具 】 饮 ， 在 选项 栏 中 单 击 EEietn, zragrhbiomtarhikrh [Ej] 8: [EJ] £ 
Me, $ [#8BR)Dfkia ] sBErX7J50%, DEBZ&] SEK, [aB] SErX2S, [DB] SErKJSsa, Grim>41u Paz — =E 
形 ， 如 图 7.154 所 示 。 
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图 7.154 ”绘制 星 形 


步骤 19 ”选中 星 形 ， 将 其 移动 复制 多 份 ， 并 旋转 或 缩放 ， 如 图 7.155 所 示 。 
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图 7.155 复制 图 形 
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7.2.3 ”制作 界面 2 背景 
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Eu war 绘制 海平 面 


步 又 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【这 度 】 为 1334 像 素 ，【 高 度 】 为 750 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 十 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 央 |， 编 辑 莫 色 (R: 167, G: 236, B: 255) 到 蓝 色 (R: 75, G: 196, B: 
226) 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 旧 按钮 ， 在 画布 中 从 下 向 上 拖 动 填充 渐变 ， 如 图 7.156 所 示 。 


图 7.156 ”填充 渐变 


选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路 径 
【形状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 。 


绘制 一 个 云 米 形状 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 7.157 所 示 。 


将 云 米 复制 多 份 ， 并 适当 缩小 及 更 改 不 透明 度 ， 如 图 7.158 所 示 。 


图 7.157 ”绘制 图 形 


”1 按钮 ， 在 弹出 的 选项 中 选择 


图 7.158 复制 图 形 


步骤 06 ”选择 工具 箱 的 【矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 72, G: 173, B: 195) ，【 描 边 】 更 
改 为 无 ， 在 界面 底部 绘制 一 个 和 矩形， 此 时 将 生成 一 个 【矩形 1】 的 图 层 。 


z ” 
步骤 07 ”选择 工具 箱 中 的 【钢笔 工具 】 £ ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 览 公 :按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 绿色 (R: 66, G: 161, B: 58) ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 绿色 图 形 ， 将 生成 一 个 【形状 2】 
层 ， 如 图 7.159 所 示 ， 


步骤 08 选中 【形状 2】 图 层 ， 在 画布 中 按 住 Alt+shift 组 合 键 向 石 侧 拖 动 复制 图 形 ， 并 将 其 图 形 宽 度 缩小 ， 如 图 7.160 所 


小 \。 


图 7.159 ”绘制 图 形 


n> 


执行 荣 单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 章 \ 动 物 卡 牌 游戏 界面 \ 及 电机 .psd” 文 件 ， 单 击 
【打开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 左 侧 绿色 图 形 位 置 并 适当 缩小 ， 如 图 7.161 所 示 。 


图 7.160 复制 图 形 


EE aid 


图 7.161 添加 素材 


7.2.4 市 作 界 面 2 主 面 权 


添加 文字 
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步骤 01 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 249, G: 243, B: 188) , DE 
边 】 更 改 为 监 色 (R: 77, G: 161, B: 199) ，【 宽 度 】 更 改 为 15 点 ， 在 画布 靠 左 侧 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生 
成 一 个 【椭圆 1】 图 层 ， 如 图 7.162 所 示 。 


步骤 02 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 小 动物 .psd” 文 件 ， 蛙 击 
【打开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 左 侧 绿色 图 形 位 置 并 适当 缩小 ， 如 图 7.163 所 示 。 


图 7.162 ”绘制 图 形 


图 7.163 ”添加 素材 


步骤 03 ”执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版】 命令 ， 为 当前 图 层 创建 筋 贴 蒙 版 ， 隐 藏 部 分 图 像 ， 如 图 7.164 所 示 。 


图 层 
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步骤 04 ”选中 【椭圆 1】 图 层 ， 选 择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 画布 中 图 形 顶 部 边缘 添加 文字 (Bookman Old 
Style) ， 如 图 7.165 所 示 。 


步骤 05 “在 【图 层 】 面 板 中 选中 【GAMES】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 杷 按钮 ， 在 荣 单 中 选择 【 描 边 】 命 
令 ， 在 弹出 的 对 语 框 中 将 【大 小 】 更 改 为 8 像素 ，【 颜 色 】 更 改 为 监 色 (R: 77, G: 161, B: 199) ， 完 成 乙 后 单 击 【 确 定 】 
按钮 ， 效 果 如 图 7.166 所 示 。 


图 7.165 “添加 文字 


图 7.166 ”添加 描 边 


步骤 06 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 【半径 】 更 改 为 
100 像 素 ， 绘 制 一 个 圆 角 丰 形 ， 此 时 将 生成 一 个 【 圆 角 目 形 1】 图 层 ， 如 图 7.167 所 示 。 


图 7.167 ”绘制 图 形 


步骤 07 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fee, 在 菜单 中 选择 【投影 】 


人 人 
HD  。 


步骤 08 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 深 监 多 (R: 8, G: 53, B: 78) ，【 不 透明 
度 】 更 改 为 20%，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.168 所 示 。 


一 损 影 
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图 7.168 设置 【投影 】 参 数 


步骤 09 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 星 形 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 国 角 矩形 位 置 并 适当 缩小 ， 如 图 7.169 所 示 。 
步骤 10 ”选中 【椭圆 1】 图 层 ， 选 择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 星 形 右 侧 添加 文字 (Bookman Old Style) ， 如 


图 7.170 所 示 。 


图 7.169 ”添加 素材 


图 7.170 ”添加 文字 


7.2.5 ”绘制 界面 2 游戏 区 
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步骤 01 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更改 为 蓝 色 (R: 74, G: 159, B: 199) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 100 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 矩 形 ， 此 时 将 生成 一 个 【 圆 角 和 矩形 2】 图 层 ， 如 图 7.171 所 


图 7.171 ”绘制 图 形 


步骤 02， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 亦 按钮 ， 在 菜单 中 选择 【内 发 
光 】 命 令 ， 在 弹出 的 对 话 框 中 将 【 竟 合 模 式 】 更 改 为 【全 加 】，【 不 透明 度 】 更 改 为 80%，【 颜 色 】 更 改 为 黑色 ，【 大 小 】 更 改 
为 20 像 素 ， 如 图 7.172 所 示 。 
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图 7.172 ”设置 【内 发 光 】 参 数 


步骤 03 选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 赦 加 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 硫 】 更 改 为 20%，【 距 
离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.173 所 示 。 
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图 7.173 设置 【投影 参数 


步骤 04 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 74, G: 159, B: 159) , DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 50 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 矩形 2】 图 层 ， 将 圆 角 和 矩形 向 右 
侧 平 移 复制 两 份 ， 如 图 7.174 所 示 。 


步骤 05 ”选中 最 右 侧 的 圆 角 算 形 ， 将 其 【填充 】 更 改 为 浅 蓝 色 (R: 199, G: 236, B: 245) ， 如 图 7.175 所 示 。 


图 7.174 ”绘制 图 形 


图 7.175 “更 改 颜 色 


步骤 06 ”选中 浅 蓝 色 圆 角 起 形 ， 将 其 复制 多 份 ， 如 图 7.176 所 示 。 


bi 


步骤 07 选中 【椭圆 1】 图 层 ， 选 择 工具 箱 中 的 【 横 排 文 字 工 具 】 国 在 前 两 个 深蓝 色 圆 角 矩 形 位 置 添加 文字 (Bookman 
Old Style) ， 如 图 7.177 所 示 。 


图 7.176 复制 图 形 


图 7.177 添加 文字 


提示 与 技巧 


由 于 所 需要 复制 的 图 形 数量 较 少 ， 无 须 使 用 变换 复制 命令 ， 可 以 直接 复制 ， 再 执行 相对 应 的 对 齐 命令 即 可 。 


步骤 08 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 小 昆虫 .psd” 文 件 ， 蛙 击 
【打开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 贺 角 起 形 位 置 并 适当 缩小 ， 如 图 7.178 所 示 。 


步骤 09 将 【小 昆虫 】 组 展开 ， 选 中 部 分 图 层 ， 将 小 昆虫 图 像 复 制 三 份 ， 并 分 别 放 企 其 他 三 个 空缺 图 形 位 置 ， 如 图 7.179 所 


步骤 10 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 画布 靠 左 侧 位 置 按 
住 Shift 键 绘制 一 个 正 圆 图 形 ， 如 图 7.180 所 示 。 


图 7.178 ”添加 素材 


图 7.179 ”放量 素材 


步骤 11 在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 站 按钮 ， 在 菜单 中 选择 【投影 】 命 令 。 


步骤 12 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 颜 色 】 更 改 为 深 黄色 (R: 223, G: 213, B: 145), 
【不 透明 度 】 更 改 为 100%，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.181 所 


个 \。 


图 7.180 2] iE Bj 


图 7.181 添加 投影 


步骤 13 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【选择 工具 模式 】[ 路 公 引 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 楼 色 (R: 244, G: 91, B: 20) ，【 描 边 】 更 改 为 无 ， 在 正 圆 位 置 绘制 一 个 箭头 图 形 ， 如 图 7.182 所 


不 。 


图 7.182 ”绘制 图 形 


步骤 14 执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 7 草 \ 动 物 卡 牌 游戏 界面 \ 奖 励 金 币 .psd” 文 件 ， 单 击 
【打开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 右上 角 位 置 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 7.183 所 示 。 


图 7.183 最终 效果 


/3 射击 大 战 洲 戏 界 面 设 计 


设计 构思 


本 例 讲 解 制 作 射 击 大 战 游 戏 界面 ， 在 制作 过 程 中 以 射击 、 动 作 类 游戏 特征 元 素 为 制作 主题 ， 以 大 面积 蓝 色 作 为 衬托 ， 体 现 出 
很 强 的 前 卫 、 科 技 感 。 本 例 草图 及 最 终 效果 如 图 7.184 所 示 。 


图 7.184 ”最 终 效 果 
. 难 易 指数 : kk k k YY 
. 素材 位 置 : 调用 素材 \ 第 7 章 \ 射 击 大 战 游戏 界面 
. 案例 位 置 : 源 文件 \ 第 7 章 \ 射 击 大 战 游戏 开始 界面 .psd、 射 击 大 战 游戏 进行 界面 .psd 


` 视频 位 置 : 视频 教学 \7.3 射 击 大 战 游戏 界面 设计 .avi 


背景 状态 图 标 主 视觉 图 像 开始 按钮 
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CE GE 
i]: 
9: 
状态 图 标 装饰 图 像 开始 按钮 


以 蓝 色 作为 主体 色调 ， 表 现 出 冷酷 特点 ， 以 绿色 、 黄 色 等 颜色 作为 辅助 色 ， 突 出 了 整个 画面 的 战斗 感 。 


w ú l 
莫 色 (R:62,G:166,B:254) 绿色 (R:189,G:221,B:102) 黄色 (R:255,G:222,B:0) 


7.3.1 ”制作 界面 1 背景 
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操作 步骤 


步骤 01 执行 荣 单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 话 框 中 设置 【 寓 度 】 为 750 像 素 ，【 局 度 】 为 1334 像 素 ， 
【分 辨 率 】 力 72 像素/ 英寸 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 轩 | 编辑 蓝 色 (R: 62, G: 166, B: 254) 到 蓝 色 (R: 4, G: 78, B: 153) 的 
渐变 ， 单 击 选项 栏 中 的 【 径 向 渐变 】 m, 在 画布 中 从 中 心 向 右上 角 方 向 拖 动 填充 渐变 ， 如 图 7.185 所 示 。 


步 又 03 ”选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 摘 边 】 为 更 改 无 ， 在 画布 靠 左 侧 绘 制 一 
个 中 形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 7.186 所 示 。 


图 7.185 ”填充 渐变 


图 7.186 ”绘制 矩形 


步骤 04 ”选择 工具 箱 中 的 【路 径 选 择 工具 】 虑 ， 选 中 矩形 ， 按 Ctrl+Alt+T 组 合 键 对 矩形 执行 变换 复制 命令 ， 当 出 现 变形 杠 
之 后 ， 将 图 形 向 右 侧 平移 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.187 所 示 . 


步骤 05 按 住 Ctrl+Alt+shift 组 合 键 的 同时 按 T 键 多 次 ， 执 行 多 重复 制 售 令 ， 将 所 形 复制 多 份 ， 如 图 7.188 所 示 。 
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图 7.188 ”多 重复 制 
步骤 06 执行 菜单 栏 中 的 【 滤 镜 】|【 扭 曲 】|【 极 坐标 】 命 令 ， 在 弹出 的 对 语 框 中 单 击 【 栅 格 化 】 按 钮 ， 选 中 【平面 坐标 到 
极 坐 标 】 复 选 框 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 7.189 所 示 。 
步骤 07 执行 菜单 栏 中 的 【 滤 镜 】|【 捏 曲 】|【 旋 转 担 曲 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 100 度 ， 完 成 之 后 单 
击 【 确 定 】 按 钮 ， 效 果 如 图 7.190 所 示 。 


图 7.189 ”添加 极 坐 标 


图 7.190 添加 旋转 扭曲 


步 又 08 ”选中 【和 矩形 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 晋 加 】，【 不 透明 度 】 更 改 为 30%， 如 图 7.191 所 示 . 
步骤 09 ”在 【图 层 】 面 板 中 选中 【和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 


步骤 10 ”选择 工具 箱 中 的 【渐变 工具 】 = 编辑 日 色 到 黑色 的 渐变 ， 单 击 选项 栏 中 的 【 径 同 渐变 】 日 拉锯 ， 在 图 像 上 拖 
动 ， 隐 藏 部 分 图 像 ， 如 图 7.192 所 示 。 


步骤 11 选择 工具 箱 中 的 【 圆 角 起 形 工具 】 ə 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 11, G: 81, B: 149), DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 10 像 素 ， 绘 制 一 个 圆 角 赴 形 ， 此 时 将 生成 一 个 【 贺 角 起 形 1】 图 层 ， 如 图 7.193 所 示 。 


图 7.192 ”隐藏 图 像 


步骤 12 ”选择 工具 箱 中 的 【直线 工具 】 玫 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 2 像 
素 ， 在 圆 角 和 矩形 项 部 边 绿 按 住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 7.194 所 示 。 


图 7.193 ”绘制 圆 角 矩形 


图 7.194 ”绘制 线段 
步骤 13 选中 【形状 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【时 加 】， 如 图 7.195 所 示 。 


步骤 14 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 Elie, 为 其 添加 图 层 蒙 版 。 


步骤 15 ”选择 工具 箱 中 的 【渐变 工具 】 央 ,编辑 黑色 到 白色 再 到 黑色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 周 按钮， 在 
图 形 上 拖 动 ， 隐 藏 部 分 图 形 ， 如 图 7.196 所 示 。 


图 7.195 ”设置 图 层 混合 模式 


图 7.196 ”隐藏 图 像 


步骤 16 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 ， 如 图 7.197 所 示 。 


步骤 17 将 【形状 1 拷贝 】 图 层 中 线段 移 至 圆 角 矩形 底部 边 绿 ， 如 图 7.198 所 示 。 


图 7.198 ”移动 线段 


步骤 18 选择 工具 箱 中 的 【椭圆 工具 】 e, 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 66, G: 86, B: 35) ，【 摘 边 】 更 
改 为 无 ， 在 圆 角 窍 形 石 侧 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 7.199 所 示 。 


步骤 19 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 辰 部 的 【创建 新 图 层 】 lat, 复制 一 个 【椭圆 1 拷贝 ) 
图 层 ， 如 图 7.200 所 示 。 


图 7.199 ”绘制 图 形 


图 7.200 复制 图 层 


步骤 20 ” 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 刁 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 将 其 移 至 【椭圆 1】 图 层 上 方 ， 如 图 
7.201 所 示 。 


步骤 21 ”执行 菜单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 命 令 ， 为 当前 图 层 创 建 剪 贴 蒙 版 。 


步骤 22 ”选择 工具 箱 中 的 【画笔 工具 】 < ， 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 70 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 7.202 所 示 。 


图 7.202 ”设置 笔触 


步骤 23 ”选中 【椭圆 1 拷贝 】 图 层 ， 在 画布 中 将 图 形 向 上 移动 。 


步骤 24 1 


SBI =E 


色 更 改 为 绿色 (R: 132, G: 253, B: 11) ， 在 图 形 底部 位 置 单 击 添加 高 光 ， 如 图 7.203 所 示 。 


wama 


图 7.203 “更改 颜色 


步骤 25 在 【图 层 】 面 板 中 选中 【椭圆 1 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 冯 按 钮 ， 在 菜单 中 选择 【渐变 赫 
加 】 命 令 。 


步骤 26 在 阐 出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 (R: 132, G: 253, B: 11) 到 绿色 (R: 132, G: 253, B: 11) ， 
将 第 一 个 绿色 色 标 的 【不 透明 度 】 更 改 为 0%， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.204 所 示 。 


aW ash 
新 到 
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图 7.204 ”设置 【 淅 交 受 加 】 参数 


步骤 27， 选 择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 剧  ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
50 像 素 ， 绘 制 一 个 圆 角 窒 形 ， 此 时 将 生成 一 个 【 贺 角 矩形 2】 图 层 ， 如 图 7.205 所 示 。 


步骤 28 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 "l 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 2 拷贝 】 图 层 。 


步骤 29 选中 【 圆 角 起 形 2 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 中 选择 
【 顺 时 针 旋 转 90 度 】 命 令 ， 变 换 图 形 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.206 所 示 ， 将 这 两 个 图 层 合并 成 【 圆 角 和 矩形 2 拷贝 】 图 
层 。 


图 7.205 ”绘制 圆 角 和 矩形 


图 7.206 ”变换 图 形 


步骤 30 ”在 【图 层 】 面 板 选中 【 圆 角 和 矩形 2 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 闪 按 钮 ， 在 菜单 中 选择 【渐变 赤 


加 】 命 令 。 


步骤 31 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 (R: 236, G: 185, B: 116) 到 黄色 (R: 254, G: 246, B: 
233) ， 如 图 7.207 所 示 。 


图 7.207 ZE [#e o jo] 参数 


步骤 32 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【时 加 】，【 不 透明 度 】 更 改 为 80%， 取 消 【 使 用 全 局 光 】 复 选 
Nz; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 乙 后 单 击 【 确 定 】 按 钮 ， 如 图 7.208 所 示 。 


sx:[ gm — _ °Jms — 
不 通明 度 (0): 二 地 so 局 |! 
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扩展 (CR): es Ü | Sb 
Jx (S): = [2 = 


[Y 图 层 控 空投 影 仙 ) 


， 设置 为 默认 值 | | 相位 为 默认 值 | 


图 7.208 设置 【投影 】 参 数 


步骤 33 ”执行 荣 单 栏 中 的 【文件 】|【 打 开 】 人 驹 令 ， 选 择 “ 调 用 素材 \ 第 7 章 \ 射 击 大 战 游戏 界面 \ 金 币 和 钻石 .psd” 文 件 ， 单 
击 【 打 开 】 按 钮 ， 在 打开 的 素材 文档 中 选中 【钻石 】 图 层 ， 将 其 拖 入 画布 中 适当 位 置 并 缩小 ， 如 图 7.209 所 示 。 


步骤 34 ”在 【图 层 】 面 板 中 ， 将 除 【 背 景 】 和 【和 矩形 1】 之 外 的 图 层 编 组 成 【钻石 数量 】 组 ， 选 中 【钻石 数量 】 组 ， 将 其 拖 
至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【钻石 数量 拷贝 】 组 ， 如 图 7.210 所 示 。 


图 7.209 ”添加 素材 


图 7.210 复制 组 


步骤 35 将 【钻石 数量 拷贝 】 组 名 称 更 改 为 【金币 数量 】， 如 图 7.211 所 示 。 


步骤 36 ”将 【金币 数量 】 组 平移 至 画布 右 侧 相对 位 置 ， 表 将 其 展开 ， 选 中 【钻石 】 图 层 将 其 删除 ， 在 打开 的 素材 文档 中 选 
中 【人 金币】 图 层 ， 将 其 拖 入 画布 中 并 缩小 ， 如 图 7.212 所 示 。 


图 7.212 ”添加 素材 


步骤 37 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 添 在 适当 的 位 置 加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.213 所 示 . 


19300 


图 7.213 ”添加 文字 


7.3.2 ”制作 界面 1 主 视 哆 效果 
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步骤 01 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工 具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 
为 1 点 ，【 半 径 】 更 改 为 10 像 素 ， 绘 制 一 个 圆 角 矩形， 此 时 将 生成 一 个 【 圆 角 矩形 2】 图 层 ， 如 图 7.214 所 示 。 


步骤 02 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Sl 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 2 拷 贝 2】 图 层 ， 如 图 7.215 所 示 。 


图 7.214 ”绘制 圆 角 矩形 


图 7.215 复制 图 层 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 痉 按 钮 ， 在 荣 单 中 选择 【渐变 暑 


加 】 命 令 。 


步骤 04 ”在 弹出 的 对 话 框 中 将 【 竟 合 模 式 】 更 改 为 【 蔷 加 】，【 淘 变 】 更 改 为 日 色 到 日 色 ， 将 第 2 个 日 色色 标的 【不 透明 
度 】 更 改 为 0%， 【样式 】 更 改 为 【 径 同 】， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.216 所 示 。 
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图 7.216 2E [m t eja] 参数 
提示 与 技巧 


在 设置 渐变 登 加 时 ， 在 对 话 框 打 开 的 状态 下 ， 可 在 画布 中 按 住 鼠 标 左 键 更 改 渐 变 颜 色 的 位 置 。 


步骤 05 ”选中 【 贺 角 起 形 2】 图 层 ， 将 其 图 层 【 不 透明 度 】 更 改 为 0%， 如 图 7.217 所 示 。 


图 7.217 更 改 填充 


提示 与 技巧 


更 改 填充 之 后 ， 可 将 【 圆 角 算 形 2 拷贝 2】〗” 图 层 暂 时 隐藏 ， 以 便 观 察 更 改 填充 后 的 效果 。 


步骤 06 ”选中 【 圆 角 算 形 2 拷贝 2】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 将 图 形 等 比 缩小 ， 骨 将 高 度 缩小 ， 
元 成 之 后 按 Enter 键 确认 ， 如 图 7.218 所 示 。 


步骤 07 将 圆 角 矩形 【 摘 边 】 更 改 为 深 绿色 (R: 35, G: 61, B: 4) ，【 宽 度 】 更 改 为 3 点 ， 如 图 7.219 所 示 。 


图 7.218 ”缩小 图 形 


图 7.219 ”更 改 描 边 


步 又 08， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2 拷 贝 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 总 按钮 ， 在 菜单 中 选择 【 浙 


变量 加 】 命 令 。 


步骤 09 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 (R: 189, G: 221, B: 102) 到 绿色 (R: 54, G: 112, B: 0) ， 
【样式 】 更 改 为 【 径 向 】，【 角 度 】 更 改 为 0%，【 缩 放 】 更 改 为 125%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.220 所 示 。 
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图 7.220 2 E [e 2 epo] 参数 


步骤 10 ”在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 峡 按钮 上 ， 复 制 一 个 【和 矩形 1 拷贝 】 
图 层 ， 将 其 移 至 【 圆 角 和 矩形 2 拷贝 2】 上 方 ， 如 图 7.221 所 示 。 


步骤 11 在 【 圆 角 息 形 2 拷贝 2】 图 层 名 称 上 单 击 鼠 标 石 键 ， 从 弹出 的 快捷 菜单 中 选择 【 栅 格 化 图 层 样 式 】 命 令 ， 栅 格 化 图 
层 样 式 ， 如 图 7.222 所 示 。 


图 7.221 复制 图 层 


图 7.222 44 ES Z 8 Á 


步 又 12 Mjsrh [3EJZ1SDl] EE, ihí/rxaePB4AZrhB3J [EU | [@)#Ësshz<hR ] p<, JJ33BuElFE@lJëšsshz<hR, Bagseup2> 
图 像 ， 如 图 7.223 所 示 。 


步骤 13 按 Ctrl+T 组 合 键 对 图 像 执 行 【 目 由 变换 】 谷 令 ， 将 其 等 比 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.224 所 示 。 


步骤 14 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 7 草 \ 尉 击 大 战 游戏 界面 \ 飞 机 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 如 图 7.225 所 示 。 


图 7.224 ”缩小 图 像 


图 7.225 ”添加 素材 


š 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 86 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 深 绿色 (R: 23, G: 40, B: 0) ，【 摘 边 】 更 改 为 无 ， 在 《机 底部 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 
【形状 2】 图 层 ， 如 图 7.226 所 示 。 


执行 菜单 栏 中 的 【 滤 镜 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 13 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.227 所 示 。 


图 7.226 ”绘制 图 形 


图 7.227 ”添加 高 斯 模糊 


选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 适当 位 置 添加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.228 所 示 。 


选择 工具 箱 中 的 【多 边 形 工具 】 eO 在 选项 栏 中 单 击 将 按钮 在 弹出 的 面板 中 选中 【 星 形 】 复 选 框 ， 将 【 缩 进 
边 依 据 】 更 改 为 50%，【 填 充 】 更 改 为 黄色 (R: 255, G: 222, B: 0) ，【 摘 边 】 更 改 为 无 ，【 边 】 更 改 为 ?9， 在 文字 下 方 绘 
制 一 个 星 形 ， 如 图 7.229 所 示 。 


图 7.228 ”添加 文字 


图 7.229 22 h] E J 


选中 星 形 ， 在 画布 中 按 住 At+ shift 组 合 键 癌 石 侧 拖 动 ， 将 图 形 复制 4 份 ， 如 图 7.230 所 示 。 


图 7.230 复制 图 形 


选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 轩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 绘 制 一 个 圆 角 和 窟 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 3】 图 层 ， 如 图 7.231 所 示 。 


在 【图 层 】 面 板 中 选中 【 贺 角 矩形 3】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Q] JetH L, #m#|—` (EJE 
形 3 拷 贝 】 图 层 ， 将 图 形 【填充 】 更 改 为 楼 色 (R: 254, G: 150, B: 4) ， 再 将 其 缩小 ， 如 图 7.232 所 示 。 


图 7.231 ”绘制 图 形 


图 7.232 ”变换 图 形 


在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 3 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按 钮 ， 在 菜单 中 选择 【 渐 


变革 加 】 命 令 。 


在 弹出 的 对 话 框 中 将 【 竟 合 模式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 65%，【 淘 变 】 更 改 为 日 色 到 日 色 再 到 
日 色 ， 将 中 间 日 色色 标的 【不 透明 度 】 更 改 为 0%，【 缩 放 】 更 改 为 125%， 如 图 7.233 所 示 。 


图 7.233 RE [ər k £a] 参数 


步骤 24 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深 黄色 (R: 167, G: 104, B: 16) , 
【不 透明 度 】 更 改 为 100%，【 距 离 】 更 改 为 4 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.234 所 示 。 


图 7.234 设置 【投影 】 参 数 


步骤 25 ”选中 【 圆 角 起 形 3】 图 层 ， 将 【 描 边 】 更 改 为 昌 色 ，【 宽 度 】 更 改 为 1 点 ， 将 【 盾 序 】 更 改 为 20%，【 不 透明 度 】 
更 改 为 80%， 效 果 如 图 7.235 所 示 。 


图 7.235 “更 改 填 充 及 不 透明 度 


选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 按钮 底部 绘制 一 个 
椭圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 7.236 所 示 。 


执行 菜单 柱 中 的 【 滤 镜 】| 【模糊 】|【 高 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 13 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.237 所 示 。 


图 7.236 ”绘制 椭 


图 7.237 ”添加 高 斯 模糊 


执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 
150 像 素 ， 设 置 完成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.238 所 示 。 


图 7.238 添加 动感 模糊 


步骤 29 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
7.239 所 示 。 


步骤 30 ” 按 住 Ctrl 键 单 击 【 圆 角 起 形 3 拷 贝 】 图 层 缩 贞 图 ， 将 其 载 入 选区 ; 执行 菜单 栏 中 的 【选择 】|【 肥 加 】 命 令 将 选区 反 
向 ， 将 选区 填 宛 为 黑色 ， 隐 藏 部 分 图 像 ， 完 成 乙 后 按 Ctrl+ D 组 合 键 取 消 选 区 ， 如 图 7.240 所 示 。 
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图 7.239 ”添加 图 层 蒙 版 


图 7.240 ”隐藏 图 像 


同时 选中 【椭圆 2】、【 圆 角 和 矩形 3 拷贝 】 及 【 圆 角 窍 形 3】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 
为 【按钮 】。 


在 【图 层 】 面 板 中 选中 【按钮 】 组 ， 单 击 面板 底部 的 【添加 图 层 样 式 】 立 按钮 ， 在 菜单 中 选择 【投影 】 命 令 ， 


在 弹出 的 对 话 框 中 将 【 瘟 合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深蓝 色 (R: 0, G: 41, B: 80) ，【 不 透明 
度 】 更 改 为 100%，【 距 离 】 更 改 为 5 像素 ，【 大 小 】 更 改 为 8 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.241 所 示 。 
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图 7.241 KE [22] ZZ 
步骤 34 选择 工具 箱 中 的 【 横 排 文字 工具 ]】 工 ， 在 按钮 位 置 添加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.242 所 示 。 


步骤 35 ”在 【图 层 】 面 板 中 选中 刚才 添加 的 文字 所 在 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 # 按钮 ， 在 菜单 中 选择 【 投 
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步骤 36 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 标 色 (R: 81, G: 36, B: 2) ，【 不 透明 


度 】 更 改 为 100%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.243 所 示 。 
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图 7.242 ”添加 文字 
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图 7.243 ”添加 投影 


7.3.3 ”制作 界面 2 池 戏 场景 
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场景 效果 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 750 像 素 ，【 高 度 】 为 1334 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空白 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 E] ， 编 辑 蓝 色 (R: 62, G: 166, B: 254) 到 蓝 色 (R: 4, G: 78, B: 153) 的 
渐变 ， 单 击 选项 栏 中 的 【 径 向 渐变 】 如 按钮 ， 在 画布 中 从 中 心 向 右上 角 方向 拖 动 填充 渐变 ， 如 图 7.244 所 示 。 


步骤 03 ”执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 章 \ 射 击 大 战 游 戏 界面 \ 状 态 .psd、 战 机 .psd” 文 
件 , 单 击 【 打 开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 适当 位 置 ， 如 图 7.245 所 示 。 


图 7.244 填充 渐变 


图 7.245 ”添加 素材 


步骤 04 ”选择 工具 箱 中 的 【钢笔 工具 】 必 》， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 和 ”外 按钮 ， 在 弹出 的 选项 中 选择 
[形状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更改 为 无 ， 在 红色 战机 底部 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 1】 图 层 ， 如 
图 7.246 所 示 


步骤 05 ”执行 菜单 栏 中 的 【 滤 镜 】| 【模糊 】|【 忆 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.247 所 示 。 


图 7.246 ”绘制 图 形 


图 7.247 “添加 高 斯 模糊 


执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 
为 30 像 素 ， 设 置 完成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.248 所 示 。 


将 【形状 1】 图 层 混 合 模式 设置 为 【时 加】， 如 图 7.249 所 示 。 


图 7.248 ”添加 动感 模糊 


图 7.249 ”设置 图 层 混 合 模式 


将 图 像 复制 数 份 并 移 至 其 他 几 个 战机 底部 ， 如 图 7.250 所 示 。 


图 7.250 复制 图 像 
提示 与 技巧 
复制 图 像 之 后 ， 需 要 注意 将 图 像 适 当 缩 小 与 上 方 战机 图 像 保持 大 小 对 应 。 
选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 29, G: 148, B: 232) , 


【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 100 像 素 ， 在 战机 图 像 旁 边 绘制 一 个 圆 角 和 矩形 ， 此 时 将 生成 一 个 【 圆 角 算 形 1】 图 层 ， 如 图 
7.251 所 示 。 


状 】， 单 击 【 路 径 操 作 】 辐 按 钮 ， 在 弹出 的 选项 中 选择 【合并 形状 】， 在 圆 角 和 矩形 右 下 角 绘 制 一 个 箭头 图 形 ， 如 图 7.252 所 示 。 


图 7.251 22 h] E] # 4E3E 


图 7.252 ”绘制 箭头 图 形 


将 图 形 向 右 侧 平 移 复制 一 份 并 按 Ctrl+T 组 合 键 对 其 执行 【上 自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 
选择 【旋转 180 度 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.253 所 示 。 


选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 图 形 位 置 添加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.254 所 示 。 


图 7.253 复制 并 变换 图 像 


图 7.254 ”添加 文字 


选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 绘 制 一 个 圆 角 和 起 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 2】 图 层 ， 如 图 7.255 所 示 。 


在 【图 层 】 面 板 中 选中 【 圆 角 矩形 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【 贺 角 和 矩形 
2 拷贝 】 图 层 ， 如 图 7.256 所 示 。 


图 7.255 ”绘制 圆 角 矩形 
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图 7.256 复制 图 层 


步骤 15 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 菜单 中 选择 【内 友 
光 】 命 令 ， 在 弹出 的 对 话 框 中 将 【 竟 合 模 式 】 更 改 为 【区 加 】，【 不 透明 度 】 更 改 为 20%，【 颜 色 】 更 改 为 黑色 ，【 大 小 】 更 改 
为 10 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.257 所 示 。 


图 7.257 设置 【内 发 光 】 参 数 


步骤 16 选中 【 圆 角 起 形 2】 图 层 ， 将 【填充 】 更 改 为 0%， 效 果 如 图 7.258 所 示 。 


步骤 17 ”选中 【 圆 角 起 形 2 拷 贝 】 图 层 ， 将 其 图 形 【 填 元 】 更 改 为 无 ，【 摘 边 】 更 改 为 日 多 ，【 宽 度 】 更 改 为 2 点 ， 如 图 
7.259 所 示 。 


图 7.258 更改 填充 


图 7.259 ”设置 图 形 


步骤 18 选中 【 贺 角 起 形 2 拷贝 】 图 层 ， 将 混合 模式 设置 为 【 堵 加 】， 如 图 7.260 所 示 。 


图 7.260 设置 图 层 混 合 模式 


步骤 19 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 2 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 回 按钮 ， 为 其 添加 图 层 莹 
版 ， 如 图 7.261 所 示 。 


步骤 20 ”选择 工具 箱 中 的 【 男 笔 工具 】 rJ 在 画布 中 单 击 鼠 标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 
改 为 230 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 7.262 所 示 。 
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图 7.261 添加 图 层 蒙 版 


步骤 21 | 
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图 7.262 ”设置 笔触 


色 更 改 为 黑 色 ， 人 在 图 像 部 分 区 域 涂 抹 将 其 隐 蕊 ， 


如 图 7.263 所 示 。 


图 7.263 ”隐藏 图 像 


步骤 22， 单 击 【 图 层 】 面 板 底部 的 【创建 新 图 层 】 图 按钮 ， 新 建 一 个 【图 层 1】 图 层 ， 


步骤 23 ”选择 工具 箱 中 的 【画笔 工具 】 [< 在 画布 中 单 击 鼠标 右键 ， 在 弹出 的 面板 中 选择 一 种 圆 角 笔触 ， 将 【大 小 】 更 改 
为 170 像 素 ，【 硬 度 】 更 改 为 0%， 如 图 7.264 所 示 。 


步骤 24 ”在 选项 栏 中 将 【不 透明 度 】 更 改 为 50%， 将 前 景色 更 改 为 日 色 ， 在 刚才 制作 的 图 像 左 上 角 单 击 添加 图 像 ， 如 图 
7.265 所 示 。 


图 7.264 设置 笔触 


图 7.265 ”添加 图 像 


步骤 25 ”以 同样 的 方法 分 别 在 图 像 其 他 三 个 角 添 加 图 像 ， 如 图 7.266 所 示 。 


步骤 26 ”在 【图 层 】 面 板 中 选中 【图 层 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
7.267 所 示 。 


图 7.266 ”添加 图 像 


图 7.267 添加 图 层 蒙 版 


步骤 27” 按 住 Ctrl 键 单 击 【 圆 角 起 形 2 拷贝 】 图 层 缩 贞 图 ， 将 其 载 入 选区 ; 执行 菜单 栏 中 的 【选择 】|【 肥 加 】 合 令 ， 将 选区 
反 向 ， 将 选区 填充 为 黑色 ， 隐 藏 部 分 图 像 ， 完 成 之 后 按 Ctrl+D 组 合 键 取消 选区 ， 如 图 7.268 所 示 。 
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图 7.268 ”隐藏 图 像 


步骤 28 选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 路 径 按钮， 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 无 ，【 摘 边 】 更 改 为 日 色 ，【 宽 度 】 更 改 为 1 扣 ， 在 图 像 硕 部 绘制 一 条 折线 ， 将 生成 一 个 【形状 
2】 图 层 ， 如 图 7.269 所 示 。 


步骤 29 将 【形状 2】 图 层 混合 模式 设置 为 【 羡 加 】， 效 果 如 图 7.270 所 示 。 
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图 7.269 ”绘制 折线 


图 7.270 设置 图 层 混 合 模式 


选中 【形状 2】 图 层 ， 在 画布 中 按 住 Alt+ Shift 组 合 键 向 图 像 底 部 拖 动 将 其 复制 ， 如 图 7.271 所 示 。 


选中 生成 的 【形状 2 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 荣 单 
中 选择 【旋转 180 度 】 命 令 ， 完 成 乙 后 按 Enter 键 确认 ， 如 图 7.272 所 示 。 


图 7.271 复制 折线 


图 7.272 ”变换 图 形 


7.3.4 制作 界面 2 主体 部 分 


AES) E R 
制作 选择 按钮 
一 绘制 开始 按钮 


步骤 01 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 草 \ 尉 击 大 战 游戏 界面 \ 缀 炸 机 .psd” 文 件 ， 蛙 击 
【打开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 如 图 7.273 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 和 矩 形 工具 】 国 在 选项 栏 中 将 【填充 】 更 改 为 栖 色 (R: 254, G: 151, B: 6) ，【 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 5 像素 ， 绘 制 一 个 圆 角 矩形， 此 时 将 生成 一 个 【 圆 角 和 矩形 3】 图 层 ， 如 图 7.274 所 示 。 


图 7.273 ”添加 素材 


图 7.274 22 h] sJ # £E 3 


在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 PC24n, ¿rszearchikpz [Wapa 


在 弹出 的 对 话 框 中 将 【 瘟 合 模式 】 更 改 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 65%，【 淘 变 】 更 改 为 日 色 到 日 色 再 到 
日 色 ， 将 中 间 日 色色 标的 【不 透明 度 】 更 改 为 0%，【 和 角度】 更 改 为 0%， 如 图 7.275 所 示 。 


= 
| 取消 | 
新 建 样式 (Ww)..。 | 
呵 预览 (V) 


: 请 性 | * =F 
mmn (b Jm = 


”设置 为 时 让 值 | | El 3gLLIs 


图 7.275 ”设置 【渐变 登 加 】 参数 


步骤 05 ”选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 正 弟 】，【 关 色 】 更 改 为 深 栖 色 (R: 167, G: 104, B: 16) ， 
【不 透明 度 】 更 改 为 100%，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.276 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 圆 角 矩形 位 置 添加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.277 所 示 。 


BE (Ay: < 四 E 口 使 用 全 局 光 人 


可 图 层 控 空 投影 人 U) 
”设置 为 默认 值 | | Ejs | 


图 7.276 ”设置 【投影 参数 


步骤 07 在 【图 层 】 面 板 中 选中 添加 的 文字 所 在 图 层 ， 单 击 面 板 底 部 的 【添加 图 层 样 式 】 fx 按钮 ， 在 菜单 中 选择 【投影 


必 人、 
RD o 


步骤 08 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 深 标 色 (R: 81, G: 36, B: 2) ，【 不 透明 
度 】 更 改 为 100%， 取 消 【 使 用 全 局 光 】 复 选 框 ; 将 【角度 】 更 改 为 90 度 ，【 距 离 】 更 改 为 1 像素 ，【 大 小 】 更 改 为 1 像素 ， 完 成 
之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 7.278 所 示 。 


图 7 277 


添加 文字 


图 7.278 ”添加 投影 


同时 选中 【选择 战机 】 及 【 圆 角 矩形 3】 图 层 ， 按 Ctrl+ G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【选择 按钮 】。 


选中 【选择 按钮 】 组 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【选择 按钮 拷贝 】 组 ， 在 画布 中 
将 其 向 右 侧 平 黎 ， 如 图 7.279 所 示 。 


图 7.279 复制 组 


步骤 11 选择 工具 箱 中 的 【 横 排 文字 工具 】 业 | 在 适当 的 位 置 添加 文字 (方正 兰亭 中 粗 黑 ) ， 如 图 7.280 所 示 。 


步骤 12 ”选择 工具 箱 中 的 【多 边 形 工具 】 曙 ， 在 选项 栏 中 单 击 蒜 按钮 在 弹出 的 面板 中 选中 【 星 形 】 复 选 框 ,将 【 缩 进 
边 依 据 】 更 改 为 50%，【 填 充 】 更 改 为 黄色 (R: 255, G: 222, B: 0) ，【 摘 边 】 更 改 为 无 ， 在 文字 下 万 绘 制 一 个 星 形 ， 如 图 
7.281 所 示 。 


图 7.280 “添加 文字 


图 7.281 22 h] E J 


选中 星 形 ， 在 画布 中 按 住 At+ shift 组 合 键 癌 石 侧 拖 动 ， 将 图 形 复制 4 份 ， 如 图 7.282 所 示 。 


同时 选中 “战斗 力 ”文字 及 其 后 方 星 形 ， 向 右 侧 平移 复制 ， 并 将 复制 生成 的 星 形 后 面 再 复制 一 个 星 形 ， 如 图 7.283 
所 示 。 


图 7.283 ”复制 图 文 


执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 章 \ 射 击 大 战 游戏 界面 \ 开 始 战 斗 按钮 .psd” 文 件 ， 
单 击 【打开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 底部 位 置 ， 这 样 束 完成 了 效果 的 制作 ， 如 图 7.284 所 示 。 
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图 7.284 最终 效 果 


7.4 数字 主题 游戏 界面 设计 


设计 构思 


本 例 讲 解 制作 数字 主题 游戏 界面 ， 该 界面 在 制作 过 程 中 ， 将 游戏 的 主题 分 成 区 域 化 进行 设计 ， 不 同 的 颜色 表示 对 应 的 功能 。 
本 例 草 图 及 最 终 效果 如 图 7.285 所 示 。 


图 7.285 最终 效 果 


. 难 易 指数 : kkk k Yc 

` 素材 位 置 : 调用 素材 \ 第 7 章 \ 数 字 主 题 游戏 界面 

: 案例 位 置 : 源 文 件 \ 第 7 章 \ 数 字 主 题 游戏 开始 界面 .psd、 数 字 主题 游戏 进行 界面 .psd 
“ 视频 位 置 : 视频 教学 \7.4 数 字 主 题 游戏 界面 设计 .avi 


重点 分 解 


游戏 名 称 托盘 图 像 


界面 头条 游戏 区 域 开始 按钮 
色彩 分 析 


以 橙色 作为 暖色 调 ， 以 绿色 、 某 色 、 栖 色 等 颜色 作为 辅助 和 色 ， 整 体 和 色调 偏 暖 。 


[ES 
橙色 (R:239,G:112,B:59) 绿色 (R:168,G:202,B:79) 紫色 (R:210,G:53,B:220) 蓝 色 (R:64,G:169,B:236) 


7.4.1 制作 界面 1 背景 


处 理 布艺 纹理 number 制作 艺术 名 称 


制作 渐变 背景 


操作 步骤 
步 又 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 750 像 素 ，【 高 度 】 为 1334 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空白 画布 . 
步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 ËI ， 编 辑 浅 蓝 色 (R: 240, G: 250, B: 254) 到 蓝 色 (R: 127, G: 205, B: 


243) 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 央 按钮 ， 在 画布 中 拖 动 填充 渐变 ， 如 图 7.286 所 示 。 
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步骤 03 j&>RT 8rh89 [SS T B] £ ， 在 选项 栏 中 单 击 【选择 工具 模式 】| 器 按钮， 在 弹出 的 选项 中 选择 【 形 

状 】， 将 【填充 】 更 改 为 术 色 (R: 239, G: 112, B: 59) ，【 摘 边 】 更 改 为 无 ， 在 界面 项 部 绘制 一 个 不 规则 图 形 ， 将 生成 一 
个 【形状 1】 图 层 ， 如 图 7.287 所 示 。 


图 7.286 ”填充 渐变 


图 7.287 ”绘制 图 形 
EUEO4 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 转 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 


== 
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步骤 05 将 【形状 1 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 无 ，【 摘 边 】 更 改 为 浅 栖 色 (R: 255, G: 211, B: 193) , 
度 】 更 改 为 2 点 ; 单 击 【 设 置 形状 摘 边 类 型 】 "| 按钮 ， 在 弹出 的 选项 中 选择 第 二 种 描 边 类 型 ， 再 将 图 形 高 度 适当 缩小 ， 如 


图 7.288 所 示 。 


图 7.288 ”更 改 描 边 


步骤 06 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 fx 按钮 ， 在 荣 单 中 选择 【和 斜面 和 浮 


雕 】 命 令 。 


步骤 07 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 15 像 素 ，【 软 化 】 更 改 为 5 像素 ， 取 消 【 使 用 全 局 光 】 复 选 框 ;将 【阴影 模 
式 】 更 改 为 【车 加 】，【 不 透明 度 】 更 改 为 20%， 如 图 7.289 所 示 。 
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图 7.289 ”设置 【斜面 和 浮雕】 参数 


步骤 08 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 深蓝 色 (R: 10, G: 72, B: 102) ， 


"42:14 
【不 透明 度 】 更 改 为 60%，【 距 离 】 更 改 为 3 像素 ，【 大 小 】 更 改 为 13 像 素 ， 完 成 乙 后 单 击 【 确 定 】 按 钮 ， 如 图 7.290 所 示 。 
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图 7.290 设置 【投影 】 参 数 


| “新 建 样式 (w)..。 | 
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步骤 09 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 中 适当 的 位 置 添加 文字 (Vogue Bold) ， 如 图 7.291 所 示 。 


图 7.291 添加 文字 


步骤 10 在 【图 层 】 面 板 中 选中 添加 的 文字 所 在 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 剖 按 钮 ， 在 菜单 中 选择 【内 阴 


= Z 
Z] 命令。 


步骤 11 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 深 楼 色 (R: 41, G: 14, B: 3) ，【 不 透明 
上 度 】 更 改 为 100%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.292 所 示 。 
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图 7.292 设置 【内 阴影 】 参 数 


7.4.2 制作 界面 1 选择 主题 


number 
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制作 托盘 图 像 


步骤 01 选择 工具 箱 中 的 【 圆 角 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 112, G: 129, B: 53) , DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 30 像 素 ， 绘 制 一 个 圆 角 和 矩形， 此 时 将 生成 一 个 【 圆 角 矩 形 1】 图 层 ， 如 图 7.293 所 示 。. 


步骤 02 ”选中 【 贺 角 起 形 1】 图 层 ， 按 Ctrl+T 组 合 键 对 图 形 执 行 【 目 由 变换 】 命 令 ， 单 击 鼠 标 右 键 ， 从 弹出 的 快捷 荣 单 中 选 
择 【 透 视 】 命 令 ， 拖 动 变 形 框 控 制 点 变换 图 形 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.294 所 示 。 


图 7.293 22 h] |#] # £E3E 


number 


图 7.294 ”变换 图 形 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 果 按钮 上 ， 复 制 一 个 【 圆 角 和 矩 
形 1 拷贝 】 图 层 ， 如 图 7.295 所 示 。 


步骤 04 选中 【 贺 角 起 形 1 拷贝 】 图 层 ， 将 图 形 【 盾 宛 】 更 改 为 绿色 (R: 168, G: 202, B: 79) ， 并 缩小 其 高 度 ， 如 图 
7.296 所 示 。 


图 7.296 ”填充 并 缩小 图 形 高 度 


步骤 05 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 7 草 \ 数 字 主 题 游戏 界面 \ 球 体 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 在 打开 的 文档 中 选中 【气球 】 图 层 ， 将 其 拖 入 画布 中 并 适当 缩小 和 旋转 ， 如 图 7.297 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 52, G: 63, B: 13) ，【 描 边 】 更 
改 为 无 ， 在 气球 扶 部 绘制 一 个 椭圆 图 形 ， 此 时 将 生成 一 个 【 李 圆 1】 图 层 ， 将 其 移 全 【气球 】 图 层 下 万 ， 如 图 7.298 所 示 。 


图 7.297 添加 素材 


图 7.298 ”绘制 椭 


步骤 07 ”执行 荣 单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 局 斯 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 单 击 【 栅 格 化 】 按 钮 ， 然 后 在 弹出 的 对 
话 框 中 将 【半径 】 更 改 为 10 像 素 ， 完 成 之 后 单 击 【 和 确定】 按钮， 效果 如 图 7.299 所 示 。 


步骤 08 执行 菜单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 动 感 模糊 】 命 令 ， 在 弹出 的 对 话 框 中 将 【角度 】 更 改 为 0，【 距 离 】 更 改 为 
100 像 素 ， 设 置 完 成 之 后 单 击 【 和 确定】 按钮 ， 如 图 7.300 所 示 。 


图 7.299 ”添加 高 斯 模糊 


图 7.300 ”添加 动感 模糊 


步骤 09 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 二 ， 在 适当 的 位 置 添加 文字 (Vogue Bold) ， 如 图 7.301 所 示 。 


步骤 10 ”选择 工具 箱 中 的 【钢笔 工具 】 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 :| 按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 绿色 (R: 168, G: 202, B: 79) ，【 摘 边 】 更 改 为 无 ， 在 文字 底部 绘制 一 个 不 规则 图 形 ， 如 图 7.302 
所 示 。 


图 7.301 添加 文字 


图 7.302 ”绘制 图 形 


同时 选中 所 有 和 托盘 相 天 的 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【简单 】。 


步骤 12 ”在 【图 层 】 面 板 中 ,将 【简单 】 组 拖 至 面板 底部 的 【创建 新 图 层 】 赎 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 分 别 将 组 名 称 
更 改 为 【中 级 】 和 【复杂 】， 如 图 7.303 所 示 。 


步骤 13 分别 选 中 【中 级 】 组 和 【复杂 】 组 ， 在 画布 中 向 下 移动 ， 并 将 组 中 的 素材 图 像 、 文 字 及 其 底部 不 规则 图 形 删 除 ， 
只 保留 托盘 图 形 ， 如 图 7.304 所 示 。 


图 7.304 移动 图 像 


步骤 14 ”在 打开 的 素材 文档 中 选中 【气球 2】 图 层 ， 将 图 像 拖 至 当前 画布 中 ， 如 图 7.305 所 示 。 


步骤 1? 更 改 【 中 级 】 组 中 的 图 形 颜色 ， 如 图 7.306 所 示 。 


图 7.305 ”添加 素材 


图 7.306 “更 改 图 形 颜 色 


步骤 16 ”以 同样 的 方法 更 改 【 复 杂 】 组 中 的 图 形 颜色 ， 如 图 7.307 所 示 。 


步骤 17 ”在 打开 的 素材 文档 中 选中 【足球 】 图 层 ， 将 图 像 拖 至 当前 画布 中 ， 如 图 7.308 所 示 。 


图 7.307 ”更改 颜色 


图 7.308 ”添加 素材 


步骤 18 ”以 刚才 同样 的 方法 在 素材 图 像 底 部 绘制 椭圆 并 制作 阴影 效果 ， 如 图 7.309 所 示 。 


步骤 19 ”以 刚才 同样 的 方法 在 素材 右 侧 添 加 文字 ， 并 在 文字 底部 绘制 图 形 ， 如 图 7.310 所 示 。 


图 7.309 ”制作 阴影 


图 7.310 “添加 文字 


步骤 20 ”选择 工具 箱 中 的 【钢笔 工具 】 Z? ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 画布 左上 角 绘 制 一 个 云 呆 图 形 ， 将 生成 一 个 【形状 5】 图 层 ， 如 图 7.311 
ss. 


步骤 21 在 【图 层 】 面 板 中 选中 【形状 5】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 立 按 钮 ， 在 荣 单 中 选择 【斜面 和 浮雕】 


number 


图 7.311 绘制 图 形 


步骤 22 ”在 弹出 的 对 话 框 中 将 【大 小 】 更 改 为 30 像 素 ，【 阴 影 模式 】 更 改 为 监 色 (R: 138, G: 209, B: 244) ，【 不 透 
明度 】 更 改 为 30%，【 阴 影 模式 】 更 改 为 浅 蓝 色 (R: 138, G: 209, B: 244) ，【 不 透明 度 】 更 改 为 30%， 完 成 之 后 单 击 
【确定 】 按 钮 ， 如 图 7.312 所 示 。 
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图 7.312 ”设置 【和 斜面 和 浮雕 】 参 数 


步骤 23 ”选中 【 云 洲 】 图 层 ， 在 画布 中 按 住 Alt 键 将 图 形 复制 两 份 并 变 损 大 小 ， 如 图 7.313 所 示 。 


number 


MFDIUM 


图 7.313 ”复制 图 形 


7.4.3 ”绘制 界面 2 主题 背景 
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处 理 绿 色 
E= 装饰 Í] IE: 


步骤 01 H4paesB4=rBBJ [s2íF] | 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 750 像 素 ，【 高 度 】 为 1334 像 素 ， 
【分 辨 率 】 为 72 像 素 / 瑞 寸 ， 新 建 一 个 空 日 画布 。 


步骤 02 ”选择 工具 箱 中 的 【渐变 工具 】 攻 | ， 编 辑 浅 蓝 色 (R: 240, G: 250, B: 254) 到 蓝 色 (R: 127, G: 205, B: 
243) 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 E] 按钮 ， 在 画布 中 拖 动 填充 渐变 ， 如 图 7.314 所 示 。 
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图 7.314 ”填充 渐变 


步骤 03， 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 剧 ， 在 选项 栏 中 将 【填充 】 更 改 为 楼 色 (R: 239, G: 112, B: 59) ，[ 描 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 20 像 素 ， 绘 制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 算 形 1】 图 层 ， 如 图 7.315 所 示 。 


步骤 04 选中 【 圆 角 矩形 1】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右键 ， 从 弹出 的 快捷 菜单 中 选择 
【变形 】 命 令 ， 单 击 选项 栏 【 变 形 】 后 方 的 按钮 ， 在 弹出 的 选项 中 选择 【 拱 形 】， 将 【弯曲 】 更 改 为 -10， 完 成 之 后 按 Enter 键 
确认 ， 如 图 7.316 所 示 。 


图 7.315 ”绘制 图 形 


图 7.316 ”将 图 形变 形 


步 又 05 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】|[ EZ ”按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 楼 色 (R: 211, G: 94, B: 45) ，【 描 边 】 更 改 为 无 ， 在 图 形 左 侧 绘制 一 个 不 规则 图 形 ， 将 生成 一 个 
[形状 1]】 图 层 。 


步骤 06 ”在 刚才 绘制 的 图 形 右 下 角 位 置 ， 绘 制 一 个 深 楼 色 (R: 134, G: 48, B: 12) 不 规则 小 图 形 ， 以 制作 背面 效果 ， 
将 生成 一 个 【形状 2】 图 层 ， 如 图 7.317 所 示 。 


图 7.317 ”绘制 图 形 


步骤 07 ”同时 选中 【形状 1】 及 【形状 2】 图 层 ， 在 画布 中 按 住 Alt+Shift 组 合 键 向 右 侧 拖 动 复制 图 形 。 


步骤 08 ”同时 选中 生成 的 【形状 1 拷贝 】 及 【形状 2 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 图 形 执行 【上 自由 变换 】 命 令 ， 单 击 女 标 
右键 ， 从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 7.318 所 示 。 


图 7.318 ”变换 图 形 


步骤 09 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 ?按钮 ， 在 缮 出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 2 点 ， 在 图 形 左上 角 绘 制 一 条 线段 。 


步骤 10 单 击 【 设 置 形状 描 边 类 型 】| 一 一 | 按钮， 在 弹出 的 选项 中 选择 第 二 种 描 边 类 型 ， 在 其 他 位 置 绘制 相似 线段 ， 如 图 
7.319 所 示 。 
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步骤 13 
更 改 为 1 像素 ， 


图 7.319 ”绘制 线段 


同时 选中 所有 和 续 段 相 天 的 图 层 ， 近 Ctrl+ 组合 键 将 其 编组 ， 将 生成 的 组 名 称 更 改 为 【虚线 】。 


在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】， 
完成 之 后 单 击 【确定 】 按 钮 ， 如 图 7.320 所 示 。 


【颜色 】 更 改 为 黑色 ， 


【不 透明 度 】 更 改 为 100%， 


最 12 在 【图 层 】 面 板 中 选中 【虚线 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 炬 按钮 ， 在 菜单 中 选择 【投影 】 命令 。 


【距离 】 
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图 7.320 设置 【投影 】 参 数 


步骤 14 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 交 按钮 ， 在 菜单 中 选择 【投影 】 命 


As 
Xo 


步骤 12 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 荆 加 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 60%，【 距 离 】 
更 改 为 7 像素 ，【 大 小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.321 所 示 。 
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图 7.321 设置 【投影 】 参 数 


步 又 16 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 二 ， 在 适当 的 位 置 添加 文字 (Vogue Bold) ， 如 图 7.322 所 示 。 


challenge! 


图 7.322 ”添加 文字 


步骤 17 ”在 【图 层 】 面 板 中 选中 刚才 添加 的 文字 所 在 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按钮， 在 菜单 中 选择 【内 


步骤 18 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正音 】，【 颜 色 】 更 改 为 深 楼 色 (R: 41, G: 14, B: 3) ，【 不 透明 
度 】 更 改 为 100%，【 距 离 】 更 改 为 2 像素 ，【 大 小 】 更 改 为 2 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.323 所 示 。 
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图 7.323 设置 【内 阴影 】 参 数 


步骤 19 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 径 ?| 按钮， 在 弹出 的 选项 中 选择 
[形状 】， 将 【填充 】 更 改 为 绿色 (R: 165, G: 200, B: 82) ，【 描 边 】 更 改 为 无 


步骤 20 ”在 界面 下 半 部 分 位 置 绘制 一 个 不 规则 图 形 ， 如 图 7.324 所 示 。 


图 7.324 ”绘制 图 形 


步骤 21 在 【图 层 】 面 板 中 选中 【形状 7】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 Fei 在 荣 单 中 选择 【渐变 于 加 】 
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步骤 22 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 姓 加 】， 【不 透明 度 】 更 改 为 590%，【 渐 变 】 更 改 为 黑色 到 黑色 ， 将 
第 一 个 黑色 色 标 的 【不 透明 度 】 更 改 为 0%， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.325 所 示 。 
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图 7.325 设置 【渐变 登 加 】 参数 


步骤 23 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】 | 路 径 。 按钮， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 绿色 (: R: 138, G: 177，B: 47) ，【 描 边 】 更 改 为 无 。 


步骤 24 ”在 界面 左下 角 绘 制 一 个 不 规则 图 形 ， 将 生成 一 个 【形状 8】 图 层 ， 如 图 7.326 所 示 。 


图 7.326 ”绘制 图 形 


步骤 25 “在 【图 层 】 面 板 中 选中 【形状 8】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 加 按钮， 为 其 添加 图 层 蒙 版 ， 如 图 
7.327 所 泵 。 


图 7.327 添加 图 层 蒙 版 


步骤 26 ”选择 工具 箱 中 的 【渐变 工具 】 轩 ,编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 司 按钮 ， 在 图 形 上 拖 
功 ， 隐 藏 部 分 图 形 ， 如 图 7.328 所 示 。 


过 


图 7.328 ”隐藏 图 形 
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主 视觉 图 像 效 果 


步骤 01 选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
20 像 素 ， 绘 制 一 个 圆 角 和 矩形， 此 时 将 生成 一 个 【 圆 角 和 矩形 2】 图 层 ， 如 图 7.329 所 示 。 


图 7.329 ”绘制 图 形 


步骤 02 在 【图 层 】 面 板 中 选中 【 圆 角 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 按钮 ， 在 菜单 中 选择 【渐变 堵 


加 】 命 令 。 


步骤 03 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 白色 到 灰色 (R: 226, G: 226, B: 226) ，【 缩 放 】 更 改 为 90%， 如 图 
7.330 所 示 。 


图 7.330 ZE [#r k #jo] 参数 


步骤 04 选中 【和 斜面 和 浮雕 】 复 选 枉 ， 将 【大 小 】 更 改 为 4 像素 ，【 阴 影 模式 】 中 的 【不 适 明 度 】 更 改 为 129%， 如 图 7.331 
所 示 。 
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图 7.331 设置 【斜面 和 浮雕】 参数 


步骤 05 ”选中 【投影 】 复 选 枉 ， 将 【混合 模式 】 更 改 为 【 正 靛 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 硫 】 更 改 为 20%，【 距 
离 】 更 改 为 6 像素 ，【 大 小 】 更 改 为 8 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.332 所 示 。 


图 7.332 ”设置 【投影 】 参 数 


步骤 06 选择 工具 箱 中 的 【 横 排 文字 工具 】 = 在 适当 的 位 置 添加 文字 (Vogue Bold) ， 如 图 7.333 所 示 。 


图 7.333 ”添加 文字 


步骤 07 ”同时 选中 【6】 及 【 圆 角 算 形 2】 图 层 ， 按 Ctrl+G 组 合 键 将 其 编组 ， 将 生成 的 【组 1】 组 复制 数 份 ， 并 更 改 部 分 文 
字 ， 如 图 7.334 所 示 。 


图 7.334 复制 图 文 


步骤 08 选择 工具 箱 中 的 【 圆 角 乱 形 工具 】 əe 在 选项 栏 中 将 【填充 】 更 改 为 红色 (R: 234, G: 68, B: 54) , Ds 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 20 像 素 ， 绘 制 一 个 圆 角 和 窟 形 ， 此 时 将 生成 一 个 【 圆 角 起 形 3】 图 层 ， 如 图 7.335 所 示 。 


图 7.335 ”绘制 图 形 


步骤 09 在 【图 层 】 面 板 中 选中 【 圆 角 窍 形 3】 图 层 ， 单 击 面板 撒 部 的 【添加 图 层 样式 】 = 按钮 ， 在 菜单 中 选择 【投影 


人 人 
RD Zo 


步骤 10 ”在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【正常 】，【 颜 色 】 更 改 为 红色 (R: 143, G: 36, B: 27) ，【 不 透 
明度 】 更 改 为 100%，【 距 离 】 更 改 为 6 像素 ，【 大 小 】 更 改 为 0 像素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 7.336 所 示 。 


图 7.336 ”设置 【投影 】 参 数 


步骤 11 选中 【challenge! 】 图 层 ， 在 画布 中 按 住 At+ Shift 组 合 键 向 底部 拖 动 复 制 文 字 ， 并 更 改 复制 生成 的 文字 信息 ， 这 
样 残 完 成 了 效果 的 制作 ， 如 图 7.337 所 示 。 


challenge! stor gomes! 


第 8 和 草 ”应 用 系统 界面 设计 
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本 草 讲解 应 用 系统 界面 设计 ， 应 用 系统 类 界面 的 设计 以 突出 应 用 的 特点 为 主 ， 在 整个 图 形 图 像 化 的 设计 与 制作 过 程 中 应 当 
意 整个 应 用 界面 的 协调 性 ， 同 时 假如 在 有 必要 的 情况 下 可 以 为 界面 添加 一 些 装饰 元 素 以 美化 整个 界面 效果 ， 另 外 色彩 的 搭配 在 应 
用 系统 界面 中 也 十 分 重要 ， 完美 的 色彩 组 合 与 搭配 ， 带 给 使 用 者 完美 的 交互 体验 。 通 过 对 本 章 内 容 的 学 习 可 以 掌握 应 用 系统 
界面 的 设计 。 


要 后 过 3 引 
.学 会 制作 应 用 登录 界面 设计 
` 学 习 Windows Phone 主 题 界面 设计 
. 学 会 天 气 插件 界面 设计 
.掌握 用 户 社交 功能 界面 设计 
' 学 会 音乐 播放 界面 设计 
. 掌握 运动 数据 界面 设计 


.学 会 电影 应 用 界面 设计 


81 ”应 用 登录 界面 设计 


设计 构思 


本 例 讲 解 制 作 应 用 登录 界面 ， 该 界面 设计 感 很 强 ， 在 整体 配色 上 以 舒适 、 有 柔和 为 主 。 本 例 草 图 及 最 终 效 果 如 图 8.1 所 示 。 


iO AM 


—ecorder 


' 难 易 指数 : kk Yc Ye Ye 
素材 位 置 : 调用 素材 \ 第 8 章 \ 应 用 登录 界面 设计 
“案例 位 置 : 源 文件 \ 第 8 章 \ 应 用 登录 界面 设计 .psd 


视频 位 置 : 视频 教学 \8.1 应 用 登录 界面 设计 .avi 


主 面板 登录 框 按钮 


色彩 分 析 
以 蓝 色调 为 主题 色 ， 将 茶色 作为 辅助 色 ， 整 体 色 调 具 有 较 强 的 时 尚 与 科技 感 。 


蓝 色 (R:148,G:208,B:255) 紫色 (R:202,G:117,B:199) 


8.1.1 绘制 主 面板 


制作 文本 框 


绘制 主 轮 万 


面板 效果 


操作 步骤 


步骤 01 执行 菜单 壬 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 7 草 \ 应 用 登陆 界面 设计 \ 背 景 jpg” 文 件 ， 单 击 【 打 
开 】 按 钮 。 


步骤 02， 选 择 工 具 箱 中 的 【 圆 角 和 矩形 工 具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 措 边 】 更 改 为 无 ， 【半径 】 更改 为 
8 像素 ， 绘 制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 8.2 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 两 个 拷贝 图 层 ， 
分 别 将 图 层 名 称 更 改 为 【顶部 】、【 底 部 】 及 【面板 】， 如 图 8.3 所 示 。 


图 8.2 ”绘制 圆 角 和 矩形 


图 8.3 复制 图 层 
又 04 ”选中 【底部 】 图 层 ， 将 图 形 【 填 充 】 更 改 为 浅 紫 色 (R: 237, G: 229, B: 237) ， 如 图 8.4 所 示 。 


骤 05 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ë ， 同 时 选中 顶部 两 个 锚 点 将 其 删除 ， 如 图 8.5 所 示 。 


图 8.4 #* n 6, 


图 8.5 删除 锚 点 


步骤 06 ”选择 工具 箱 中 的 【直接 选择 工具 】 这 ， 同 时 选中 顶部 两 个 锚 点 并 向 下 拖 动 ， 将 图 形 高 度 缩小 ， 如 图 8.6 所 示 . 


步骤 07 ”以 同样 的 万 法 选中 【顶部 】 图 层 ， 将 图 形变 形 并 更 改 为 蓝 色 (R: 148, G: 208, B: 255) ， 如 图 8.7 所 示 。 


图 8.6 28 J 83 


图 8.7 ”变换 图 形 


步骤 08 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 灰色 (R: 190, G: 
190, B: 190) ，【 寓 度 】 更 改 为 1 点 ，【 半 径 】 更 改 为 2 像素 ， 绘 制 一 个 圆 角 和 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 1】 图 层 ， 如 图 
8.8 所 泵 。 


步骤 09 选中 【 圆 角 息 形 1】 图 层 ， 将 图 形 向 下 移动 复制 一 份 ， 如 图 8.9 所 示 。 


图 8.8 绘制 图 形 


图 8.9 复制 图 形 


8.1.2 处理 细 而 


» SING IN 制作 登录 按钮 


面板 效果 


步骤 01 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 ”\ 第 8 章 \ 应 用 登录 界面 设计 \ 图 标 .psd 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 图 标 素 材 拖 入 画布 中 并 适当 缩小 ， 如 图 8.10 所 示 。 


图 8.10 添加 素材 


步骤 02 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 适当 的 位 置 添加 文字 (Humnst777Cn BT 
Bhttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/16084/OEBPS/Text/...Bold) ， 如 图 8.11 所 示 。 


图 8.11 添加 文字 


步骤 03 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 紫色 (R: 202, G: 117, B: 199) , DE 
边 】 更 改 为 无 ，【 半 径 】 更 改 为 像素， 绘制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 2】 图 层 ， 如 图 8.12 所 示 。 


步骤 04 选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 深 紫色 (R: 157, G: 76, B: 154) ，【 描 
边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 贺 图形， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 8.13 所 示 。 
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图 8.13 22) iE BJ 


步骤 05 ”选择 工具 箱 中 的 【钢笔 工具 】 避 ， 在 选项 栏 中 单 击 [iwkpE T Ese] | 路径， 按钮， 在 弹出 的 选项 中 选择 
【形状 】， 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 正 圆 位 置 绘制 一 个 三 角形 ， 如 图 8.14 所 示 . 


图 8.14 ”绘制 图 形 


步骤 06 选择 工具 箱 中 的 【 横 排 文字 工具 】 了 ， 在 适当 的 位 置 添加 文字 (Humnst777Cn BT 
Bhttp://www.hzcourse.com/resource/readBook? 
path=/openresources/teach ebook/uncompressed/16084/OEBPS/Text/...Bold) ， 这样 就 完成 了 效果 的 制作 ， 如 图 8.15 所 


个。 
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图 8.15 最 终 效 采 


8.2 Windows Phone 主 题 界面 设计 


本 例 讲解 制作 windows phone 主 题 界面 ，windows phone 主 题 界面 最 大 的 特点 是 十 分 简洁 ， 通 过 大 面积 色 块 使 用 ， 使 整个 界面 
有 具有 漂亮 的 版 式 布 局 ， 在 视觉 交互 上 同样 非常 出 色 。 本 例 草 图 及 最 终 效 果 如 图 8.16 所 示 。 


图 8.16 ”最 终 效果 
` 难 易 指数 : krik k Yc x< 
- 素材 位 置 : 调用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 
. 案例 位 置 : 源 文 件 \ 第 8 章 \Windows Phone 主 题 界面 设计 .psd 


视频 位 置 : 视频 教学 \8.2Windows Phone 主 题 界面 设计 .avi 


以 蓝 色 为 主 色 调 ， 以 白色 作为 辅助 和 色 ， 体 现 出 Windows Phone 的 界面 特征 ， 整 体 设 计 感 很 强 。 


监 色 (R:0,G:158,B:219) 


8.2.1 制作 功能 磁 贴 效果 


绘制 磁 巾 图 形 
外 利和 由 信息 er 


磁 贴 效果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 720 像 素 ，【 高 度 】 为 1280 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空 日 画布 ， 将 画布 填 苑 为 黑色 。 


步骤 02 ”执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 \ 状 态 栏 .psd” 文 
件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 素材 抱 入 画布 中 顶部 位 置 并 适当 缩小 ， 如 图 8.17 所 示 。 


图 8.17 添加 素材 


选择 工具 箱 中 的 【矩形 工具 】 图 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 0, G: 158, B: 219) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 和 矩形， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 8.18 所 示 。 


将 和 矩形 向 右 侧 平移 复制 三 份 ， 将 生成 三 个 拷贝 图 屋 , 分别 将 图 层 名 称 从 下 至 上 依次 更 改 为 【 磁 贴 】、【 磁 贴 2】、 
【 磁 贴 3】、【 磁 贴 4】， 如 图 8.19 所 示 。 


| 4G 


图 8.18 ”绘制 和 矩形 


图 8.19 复制 图 形 


执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 \ 图 标 .psd” 文 
件 ， 单 击 【 打 开 】 按 钮 ， 在 打开 的 文档 中 将 【图 标 】 组 展开 ， 同 时 选中 【信息 】、【 商 店 】 及 【浏览 器 】 图 层 ， 将 其 抑 至 当前 界 
面 中 前 三 个 起 形 位 置 ， 如 图 8.20 所 示 。 


选择 工具 箱 中 的 【 横 排 文字 工具 】 PT ， 在 图 标 旁边 位 置 添加 文字 (Humnst777BT Rom) ， 如 图 8.21 所 示 。 


图 8.20 ”添加 素材 


图 8.21 添加 文字 


处 理应 用 图 像 


What happened in 
July news 
please click to enter 


Calentar 


应 用 磁 贴 效果 


步骤 01 执行 荣 单 栏 中 的 【文件 】|【 打 开 】 人 命令， 选择 “调用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 \ 图 像 jpg” 文 
件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 2】， 将 【图 层 2】 移 至 【 磁 贴 4】 图 层 
上 方 ， 如 图 8.22 所 示 。 


步骤 02 ”执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 售 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 像 ， 如 图 8.23 所 示 。 


图 8.22 ”添加 素材 


图 8.23 ”创建 剪贴 蒙 版 


步 又 03 ”选择 工具 箱 中 的 【和 矩形 工具 】 轩 ， 在 选项 栏 中 将 【填充 】 更 改 为 蓝 色 (R: 0, G: 158, B: 219) ，【 描 边 】 更 
改 为 无 ， 按 住 Shift 键 绘制 一 个 息 形 ， 将 生成 的 图 层 名 称 更 改 为 【 磁 贴 5】， 如 图 8.24 所 示 。 


+ | 不 透明 度 : |100%| - 
+ Ñ IBZ: |100%| > 
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图 8.24 ”绘制 图 形 
在 【图 标 】 文 档 中 ， 选 中 组 中 的 【游戏 】 图 层 ， 将 其 拖 至 当前 界面 中 ， 并 放 在 【 磁 贴 ?】 图 层 的 图 形 位 置 。 


执行 荣 单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \Windows Phone 主 题 界 面 设 计 \ 游 戏 角 
色 .psd” 文 件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 ， 如 图 8.25 所 示 。 


图 8.25 ”添加 素材 


将 【游戏 角色 】 图 层 移 人 至 【 磁 贴 5】 图 层 上 方 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 草 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 
勇 贴 蒙 皮 ， 隐 藏 部 分 图 像 ， 如 图 8.26 所 示 。 


选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 适当 的 位 置 添 加 文字 (Humnst777BT Rom) ， 如 图 8.27 所 示 。 


图 8.26 ”创建 剪贴 蒙 版 


图 8.27 添加 文字 


选中 【 磁 贴 】 图 层 ， 将 图 形 复制 4 份 并 移 至 适当 的 位 置 ， 分 别 将 图 层 名 称 更 改 为 【 磁 贴 6】、【 磁 贴 7】、【 磁 贴 
8】 及 【 磁 贴 9】， 如 图 8.28 所 示 。 


图 8.28 复制 图 形 


提示 与 技巧 


除了 利用 复制 图 形 的 方法 之 外 ， 还 可 以 绘制 新 的 矩形 ， 只 要 保证 与 小 磁 贴 图 形 相 同 大 小 即 可 。 


步骤 09 在 【图 标 】 文 档 中 ， 选 中 组 中 的 【设置 】 图 层 ， 将 其 拖 至 当前 界面 中 ， 并 放 在 【 磁 贴 6】 图 层 的 图 形 位 置 ， 如 图 
8.29 所 示 。 
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图 8.29 ”添加 图 标 


执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 \ 图 像 2jpg” 文 
件 。 


单 击 【打开 】 按 钮 ， 将 打开 的 素材 把 入 画布 中 ， 其 图 层 名 称 更 改 为 【图 层 3】， 并 移 人 至 【 磁 贴 7】 图 层 上 万 ， 如 图 
8.30 所 示 。 


执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 革 版 】 合 令 ， 为 当前 图 层 创 建 筋 贴 家 唉 ， 隐 藏 部 分 图 像 ， 如 图 8.31 所 泵 。 


图 8.30 ”添加 素材 


图 8.31 创建 剪贴 蒙 版 


步骤 13 执行 菜单 栏 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \Windows Phone 主 题 界 面 设 计 \ 图 像 3jpg、 
像 4jpg” 文 件 ， 单 击 【 打 开 】 按 钮 。 


步骤 14 ”分别 将 打开 的 素材 拖 入 画布 中 ， 并 以 刚才 同样 的 方法 分 别 将 图 像 移 至 对 应 的 【 磁 贴 8】 及 【 磁 贴 9】 图 层 中 的 图 形 
上 方 ， 再 为 其 创建 剪贴 蒙 版 ， 如 图 8.32 所 示 。 
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图 8.32 ”添加 素材 


工具 箱 中 的 【矩形 工具 】 轩 ， 按 住 shift 键 绘制 一 个 矩形 ， 将 生成 的 图 层 名 称 更 改 为 【 磁 贴 5】， 如 图 8.33 所 


图 8.33 22) EJ 


图 8.34 ”添加 文字 


同时 选中 【 磁 贴 】 及 【 磁 贴 2】 图 层 ， 向 下 移动 复制 ， 并 分 别 将 其 图 层 名 称 更 改 为 【 磁 贴 11】、【 磁 贴 12】， 如 图 
8.35 所 示 。 


在 【图 标 】 文 档 中 ， 选 中 组 中 的 【照片 】 及 【程序 】 图 层 ， 将 其 拖 至 当前 界面 中 ， 并 放 在 【 磁 贴 11】、【 磁 贴 
12】 图 层 的 图 形 位 置 ， 如 图 8.36 所 示 。 


图 8.35 复制 图 形 


图 8.36 ”添加 图 标 


选择 工具 箱 中 的 【起 形 工具 】 一 上 在 界面 底部 位 置 再 次 绘制 两 个 矩形 ， 并 分 别 将 其 图 层 名 称 更 改 为 【 磁 贴 
13】、【 磁 贴 14】， 如 图 8.37 所 示 。 


图 8.37 绘制 图 形 


步骤 20 ”执行 菜单 栏 中 的 【文件 】|【 打 开 】 人 命令， 选择“ 调用 素材 \ 第 8 章 \Windows Phone 主 题 界面 设计 \ 图 像 5jpg” 文 
件 ， 早 击 【 打 开 】 按 钮 ， 如 图 8.38 所 示 。 


步骤 21 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 将 其 移 至 【 磁 贴 14】 图 层 上 方 后 创建 剪贴 蒙 版 ， 这 样 就 完成 了 效果 的 制 
作 ， 如 图 8.39 所 示 。 
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图 8.38 添加 素材 


图 8.39 最终 效 果 


83 天气 插件 界面 设计 


设计 构思 


本 例 讲 解 制作 天 气 播 件 界面 ， 在 绘制 过 程 中 将 醒目 的 天 气 元 素 图 像 与 科技 蓝 面 板 相 结合 ， 直 观 地 反映 出 界面 的 主题 特征 。 本 
例 草 图 及 最 终 效 果 如 图 8.40 所 示 。 


. 难 易 指数 : k kky xc 


案例 位 置 : 源 文件 \ 第 8 章 \ 天 气 插件 界面 设计 .psd 


` 视频 位 置 : 视频 教学 \8.3 天 气 插 件 界 面 设 计 .avi 


图 8.40 ”最 终 效 果 


@ 


面板 及 信息 太阳 与 日 云 


主体 色 为 蓝 色 调 ， 以 黄色 作为 辅助 色 ， 体 现 出 科技 感 的 同时 突出 了 元 素 特征 。 


wa 5. 
监 色 (R:49,G:133,B:197) 黄色 (R:254,G:237,B:90) 


8.3.1 绘制 面板 


制作 分 割 线 


绘制 面板 


面板 效果 


操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 语 框 中 设置 【宽度 】 为 00 像素 ，【 高 度 】 为 350 像 素 ，【 分 
汰 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 深蓝 色 (R: 25, G: 45, B: 63) 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 【半径 】 更 改 为 
10 像 素 ， 按 住 Shift 键 绘制 一 个 圆 角 矩形， 此 时 将 生成 一 个 【 圆 角 和 矩形 1】 图 层 ， 如 图 8.41 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷贝 】 图 层 ， 如 图 8.42 所 示 。 


图 8.41 22 J Ë] # EJ 


图 8.42 复制 图 层 


步骤 04， 在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 羡 按 钮 ， 在 荣 单 中 选择 【渐变 里 


加 】 命 令 。 


步骤 05? ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 蓝 色 (R: 95, G: 200, B: 255) 到 蓝 色 (R: 49, G: 133, B: 197), 
【样式 】 更 改 为 【 径 向 】，【 角 度 】 更 改 为 0， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 8.43 所 示 。 
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图 8.43 jJkEE [# 3 #.ga] Z 
步骤 06 ”选择 工具 箱 中 的 【直接 选择 工具 】 卜 ， 选 中 【 圆 角 和 矩形 1 拷贝 】 图 层 中 图 形 顶 部 锚 点 ， 将 其 删除 。 


步骤 07 ”同时 选中 顶部 两 个 销 点 ， 疝 下 拖 动 缩小 图 形 高 度 ， 如 图 8.44 所 示 。 


图 8.44 ”缩小 图 形 高 度 


步骤 08 选中 【 贺 角 起 形 1 拷贝 】 图 层 ，|; 层 混合 模式 设置 为 【 柔 光 】，【 不 透明 度 】 更 改 为 40%， 如 图 8.45 所 示 。 
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图 8.45 ”设置 图 层 混合 模式 


步骤 09 ”选择 工具 箱 中 的 【直线 工具 】。 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 蓝 色 (R: 136, G: 205, B: 243) , DE 


边 】 更 改 为 无 ，【 粗 细 】 更 改 为 1 像素 ， 在 图 形 位 置 按 住 shift 键 绘制 一 条 垂直 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 8.46 所 
7 。 


步骤 10 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 产 按 钮 ， 在 菜单 中 选择 【投影 】 命 令 。 


步骤 11 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 革 加 】，【 不 透明 度 】 更 改 为 35%，【 距 离 】 更 改 为 1 像素 ， 完 成 之 后 


单 击 【 确 定 】 按 钮 ， 效 果 如 图 8.47 所 示 。 


图 8.46 ”绘制 线段 


图 8.47 ”添加 投影 


步骤 12， 在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
8.48 所 示 . 


步骤 13 ”选择 工具 箱 中 的 【渐变 工具 】 轿 ， 编 辑 黑色 到 白色 再 到 黑色 的 渐变 ， 将 白色 色 标 的 【位 置 】 更 改 为 50%， 单 击 先 
项 栏 中 的 【线性 渐变 】 周 按钮， 在 图 形 上 拖 动 ， 隐 藏 部 分 图 形 ， 如 图 8.49 所 示 ， 


图 8.49 ”隐藏 图 形 


83.2 ”制作 天 气 元 床 


处 理 太 阳 效 果 
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5 7l H: 期 信 筷 TILE 


天 气 元 素 效果 
步骤 01 “选择 工具 箱 中 的 【椭圆 工具 】 鲁 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 界面 左上 角 按 住 


Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 8.50 所 示 。 
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图 8.50 ”绘制 正 


在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 亦 按钮 ， 在 菜单 中 选择 【渐变 亚 加 】 


sb 
少 


在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 黄色 (R: 254, G: 237, B: 90) 到 栖 色 (R: 233, G: 125, B: 0) ， 
【样式 】 更 改 为 【 径 同 】，【 角 度 】 更 改 为 0， 如 图 8.51 所 示 。 


选中 【外 友 光 】 复 选 框 ,将 【不 透明 度 】 更 改 为 60%，【 颜 色 】 更 改 为 黄色 (R: 255, G: 209, B: 27) , [X 


小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 8.52 所 示 。 


选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 国 ， 在 尘 项 栏 中 将 【填充 】 更 改 为 白色 ， 


50 像 素 ， 绘 制 一 个 圆 角 窟 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 2】 图 层 ， 如 图 8.23 所 示 。 


【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
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图 8.51 设置 【渐变 登 加 】 参数 


图 8.52 ”设置 【外 发 光 】 参 数 


步骤 06 选择 工具 箱 中 的 【椭圆 工具 】 e J IEShiftBe1+[B| SAB TIeBZSIIB8 4 1E[E], 2/E218.54FF<, 


图 8.53 ”绘制 图 形 


图 8.54 绘制 正 


在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 将 按钮 ， 在 菜单 中 选择 【渐变 对 


在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 灰色 (R: 236, G: 236, B: 236) 到 白色 ，【 缩 放 】 更 改 为 50%， 如 图 


图 8.55 EE [ər r 5 ja] 参数 


步骤 09 ”选中 【投影 】 复 选 框 ,将 【混合 模式 】 更 改 为 【正常 】，【 不 透明 度 】 更 改 为 20%，【 距 离 】 更 改 为 2 像素 ，【 大 
小 】 更 改 为 5 像素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 如 图 8.56 所 示 。 
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图 8.56 ”设置 【投影 】 参 数 


步骤 10 ”选择 工具 箱 中 的 【 模 排 文字 工具 】 T ， 在 适当 的 位 置 添加 文字 (HelveticaNeue 
Reguhttp://www.hzcourse.com/resource/readBook? 


path=/openresources/teach ebook/uncompressed/16084/OEBPS/Text/...、Helvetica Neue45L) ， 如 图 8.57 所 示 。 


选中 [MON TUE WED THU FRI 图 层 , 将 其 图 层 混合 模式 设置 为 【 革 加 】，【 不 透明 度 】 更 改 为 60%， 


步骤 11 


如 图 8.58 所 示 。 


图 8.57 ”添加 文字 


图 8.58 设置 图 层 混 合 模式 


选择 工具 箱 中 的 【钢笔 工具 2 ， 在 选项 栏 中 单 击 【 选 择 工具 模式 】| 路 人 ?按钮 ， 在 弹出 的 选项 中 选择 【 形 
状 】， 将 【填充 】 更 改 为 无 ，【 摘 边 】 更 改 为 日 色 ，【 宽 度 】 更 改 为 0.5 氮 。 


在 【Beijing】 图 层 中 文字 左 侧 绘 制 一 个 地 点 标记 图 形 ， 这 样 束 完 成 了 效果 的 制作 ， 如 图 8.59 所 示 。 


图 8.59 ”最 终 效 果 


息 及 用 户头 像 组 成 。 本 例 草 图 及 最 终 效 果 如 图 
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恒 户 sd== a 
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设计 构思 
交 简 单 ， 由 直观 的 功能 分 类 信 


本 例 讲解 制作 用 户 社交 功能 界面 ， 其 制作 过 程 比 基 


8.00 所 示 。 


` 素材 位 置 : 


委 例 位 置 : 


视频 位 置 : 


| 市 市 南 二 二 0 ANA 


图 8.00 ”最 终 效 果 


: kk Yc Ye 
调用 素材 \ 第 8 章 \ 用 户 社交 功能 界面 设计 


源 文 件 \ 第 8 章 \ 用 户 社交 功能 界面 设计 .psd 


视频 教学 \8.4 用 户 社交 功能 界面 设计 .avi 
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绿色 (R:141,G:197,B:91) 红色 (R:236,G:110,B:143) 


84.1 制作 功能 面板 


) 杰 加 面板 信息 A 


绘制 面板 轮 启 


面板 图 像 


操作 步骤 


步骤 01 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 7 草 \ 用 尸 社交 功能 界面 设计 \ 背 景 jpg” 文 件 ， 单 击 
【打开 】 按 和 钮 。 


步骤 02 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 乔 |， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
3 像素 ， 绘 制 一 个 圆 角 乱 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 8.61 所 示 。 


步骤 03 ”在 【图 层 】 面 板 中 选中 【 圆 角 和 矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 园 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷贝 】 图 层 。 将 【 圆 角 赴 形 1 拷贝 】 图 层 中 图 形 【 填 充 】 更 改 为 绿色 (R: 141, G: 197, B: 91) ， 如 图 8.62 所 示 。 


图 8.01 


绘制 园 角 矩形 


图 8.62 复制 图 层 


步骤 04 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ñ ， 同 时 选中 圆 角 和 矩形 底部 左右 两 个 锚 点 ， 将 其 删除 ， 如 图 8.63 所 示 . 


步骤 05 ”同时 选中 左下 角 及 右 下 角 销 点 并 向 上 拖 动 ， 将 图 形 高 度 缩 小 ， 如 图 8.64 所 示 。 


图 8.63 ”删除 锚 点 


图 8.64 16,320 5. 


步骤 06 ”选择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 界面 左上 角 位 置 按 
住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 8.65 所 示 。 


步骤 07 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 由 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 ) 
图 层 。 


步骤 08 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \ 用 户 社交 功能 界面 设计 \ 头 像 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 1】， 将 【图 层 1】 移 至 【椭圆 1 拷贝 】 图 层 下 
方 ， 如 图 8.66 所 示 。 


图 8.65 ”绘制 正 


图 8.66 ”添加 素材 


步骤 09 ”选中 【图 层 1】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】| 【创建 剪 贴 蒙 版 】 命令， 为 当前 图 层 创 建 剪 贴 蒙 版 ， 隐 藏 部 分 图 
像 ， 如 图 8.67 所 示 。 


图 8.67 创建 剪贴 蒙 版 


步骤 10 选中 【 李 圆 1 拷贝 】 图 层 ， 将 其 图 形 【 填 元 】 更 改 为 无 ，【 摘 边 】 更 改 为 日 多 ，【 宽 度 】 更 改 为 1 点 ， 按 Ctrl+T 组 
合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 图 形 等 比 放大 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 8.68 所 示 。 


步骤 11 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 头像 右 侧 位 置 添加 文字 (Helvetica LT Std Light) ， 如 图 8.69 所 示 。 


图 8.68 ”缩小 图 形 


图 8.69 ”添加 文字 


8.4.2” 纵 制 功能 图 形 


Settings sf 洒 加 图 标 及 
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步骤 01 选择 工具 箱 中 的 【和 矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 233, G: 227, B: 233) ，【 描 边 】 
更 改 为 无 ， 在 界面 靠 底部 绘制 一 个 与 其 色 度 相同 的 息 形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 8.70 所 示 。 


图 8.70 ”绘制 矩形 


步 又 02 ”在 【图 层 】 面 板 中 选中 【矩形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按 铀 上 ， 复 制 一 个 【和 矩形 1 拷贝 】 
图 层 ， 如 图 8.71 所 示 ， 


图 8.71 复制 图 层 


步骤 03 ”选中 【 息 形 1 拷贝 】 图 层 ， 将 其 图 形 【 填 宛 】 更 改 为 红色 (R: 236, G: 110, B: 143) ， 再 按 Ctrl+T 组 合 键 对 其 
执行 【 目 由 变换 】 谷 令 ， 将 图 形 金 度 缩小 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 8.72 所 示 。 


步骤 04 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 适当 的 位 置 添加 文字 (Helvetica LT Std Light) ， 如 图 8.73 所 示 。 


图 8.72 ”缩小 图 形 宽 度 


图 8.73 添加 文字 


步骤 05 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 8 草 \ 音 乐 播放 界面 设计 \ 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 图 标 素材 拖 入 画布 中 并 适当 缩小 ， 如 图 8.74 所 示 。 


步骤 06， 在 【图 层 】 面 板 中 选中 【图 标 3】 图 层 ， 单 击 面板 上 方 的 【锁定 透明 像素 】 图 按钮 ， 将 透明 像素 锁定 ， 如 图 8.75 
所 示 。 


Sëllings 


Location 


sehedule 


图 8.74 添加 素材 


Nitin 


图 8.75 锁定 透明 像素 


步骤 07 ”将 图 像 【 填 充 】 更 改 为 红色 (R: 236, G: 110, B: 143) ， 填 充 完成 之 后 再 次 单 击 此 按钮 解除 锁定 ， 这 样 就 完 
成 了 效果 的 制作 ， 如 图 8.76 所 示 。 


611005 


Localion 


图 8.76 最终 效 果 


8.5 ”音乐 播放 界面 设计 


设计 构思 


本 例 讲 解 制作 音乐 播放 界面 ， 该 界面 以 出 色 的 视 党 设计 为 视觉 焦点 ， 将 图 像 与 交互 式 按 钮 相 结 合 ， 整 体 表 现 出 很 强 的 设计 
感 。 本 例 草图 及 最 终 效 果 如 图 8.77 所 示 。 


` 素材 位 置 : 
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图 8.77 ”最终 效果 
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调用 素材 \ 第 8 章 \ 音 乐 播放 界面 设计 
源 文件 \ 第 8 章 \ 音 乐 播放 界面 设计 .psd 


视频 教学 \8.5 音 乐 播放 界面 设计 .avi 


播放 状态 控制 面板 


色彩 分 析 


以 红色 为 主体 色调 ， 将 浅 紫 色 作为 进度 条 颜色 与 白色 搭配 ， 整 体 界面 干净 、 整 洁 。 


红色 (R:255,G:41,B:82) 浅 紫 色 (R:255,G:149,B:207) 
8.5.1 ”绘制 界面 框架 


DISC JOCKEY iN JJU 下 让 


处 理 专辑 封 跨 


制作 进度 条 


一 绘制 控制 面板 


界面 框架 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 1080 像 素 ，【 高 度 】 为 1920 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空 日 画布 ， 将 画布 填 宛 为 深 系 色 (R: 50, G: 50, B: 76) 。 


步骤 02 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 按 住 Shift 键 绘制 一 
个 正 圆 图形， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 8.78 所 示 。 


步 又 03 ”执行 荣 单 栏 中 的 【文件 】|【 人 打开】 命令， 选择“ 调用 素材 \ 第 8 章 \ 音 乐 播放 界面 设计 \DJ 图 像 jpg” 文 件 ， 单 击 
【打开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 1】， 如 图 8.79 所 示 。 


图 8.78 绘制 正 


88.79 ”添加 素材 


步骤 04 ”选中 【图 层 1】 图 层 ， 执 行 菜单 柱 中 的 【图 层 】|【 创 建 齐 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 齐 贴 蒙 版 ， 隐 藏 部 分 图 
像 ， 如 图 8.80 所 示 。 
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图 8.80 ”创建 剪贴 蒙 版 
提示 与 技巧 
创建 剪贴 蒙 版 后 可 适当 将 图 像 缩 小 。 


步骤 05 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 冯 按钮 ， 在 菜单 中 选择 【投影 】 命 
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步骤 06 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 单 】，【 颜 色 】 更 改 为 黑色 ，【 不 透明 度 】 更 改 为 40%6， 


【距离 ] 
更 改 为 20 像 素 ，【 大 小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 8.81 所 示 。 
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图 8.81 KEE [232] Z 


选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 深蓝 色 (R: 43, G: 43, B: 67) , [325] 
更 改 为 无 ， 在 界面 顶部 绘制 一 个 与 其 相同 宽度 的 息 形 ， 此 时 将 生成 一 个 【 存 形 1】 图 层 ， 如 图 8.82 所 示 。 


图 8.82 ”绘制 图 形 
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步骤 09 选中 【 圆 角 算 形 1】 图 层 ， 将 其 向 下 移动 复制 两 份 ， 如 图 8.84 所 示 。 


图 8.83 ”绘制 圆 角 和 矩形 


图 8.84 复制 图 形 


又 10， 选择 工具 箱 中 的 【 横 排 文 字 工具 】 上 ， 添 加 文字 (Humanst521BT Ro) ， 如 图 8.85 所 示 。 


DISC JOCKEY 


图 8.85 “添加 文字 


步骤 11 选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 红色 (R: 255, G: 41, B: 82) ，【 描 边 】 更 
改 为 无 ， 在 界面 扶 部 位 置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 8.86 所 示 。 


步骤 12 ”在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 图 按钮 上 ， 复 制 一 个 【椭圆 2 拷贝 】 
到 层 ， 分 别 将 图 层 名 称 更 改 为 【进度 条 】 和 上 【控制 面板 】， 如 图 8.87 所 示 。 


图 8.86 ”绘制 正 


图 8.87 ”复制 图 层 


步骤 13 选中 【进度 条 】 图 层 ， 在 选项 栏 中 将 【 填 苑 】 更 改 为 无 ，【 摘 边 】 更 改 为 浅 紫 色 (R: 255, G: 149, B: 
207) ， 【宽度 】 更 改 为 15 操 。 


步骤 14 _ 单 击 【 设 置 形状 摘 边 类 型 】 ?| 按钮 在 弹出 的 面板 中 单 击 【 痛 氮 】 下 方 按钮 ， 在 弹出 的 选项 中 选择 第 二 种 圆 
形 站 点 类 型 ， 如 图 8.88 所 示 。 


` Z= ` +- + 口 =1TIZ > ++ — 
步骤 15 ”选择 工具 箱 中 的 【添加 锚 点 工具 】 好， 分 别 在 圆 形 左右 两 侧 添加 锚 点 ， 如 图 8.89 所 示 。 


图 8.88 ”更改 描 边 


É8.89. Z87529 5. 


步骤 16 ”选择 工具 箱 中 的 【直接 选择 工具 】 从 ， 选 中 【进度 条 】 图 层 中 线段 右 侧 锚 点 ， 将 其 删除 ， 如 图 8.90 所 示 。 


步骤 17 在 【图 层 】 面 板 中 选中 【进度 条 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 风 按钮 上 ， 复 制 一 个 【进度 条 拷 
图 层 ， 如 图 8.91 所 示 。 


图 8.90 ”删除 锚 点 


图 8.91 


复制 图 层 


图 8.92 ”更 改 颜 色 


图 8.93 ”删除 锚 点 


步骤 20 选择 工具 箱 中 的 【椭圆 工具 】 重 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 两 个 描 边 交叉 位 
置 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 8.94 所 示 。 


步骤 21 在 【图 层 】 面 板 中 选中 【椭圆 2】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 立 按钮 ， 在 菜单 中 选择 【外 发 光 】 命 
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步骤 22 在 弹出 的 对 话 框 中 将 【混合 模式 】 更 改 为 【 正 弟 】，【 不 透明 度 】 更 改 为 100%，【 颜 色 】 更 改 为 浅 紫 色 (R: 
255, G: 149, B: 207) ，【 大 小 】 更 改 为 18 像 素 ， 完 成 之 后 单 击 【确定 】 按 钮 ， 效 果 如 图 8.95 所 示 。 


图 8.94 绘制 正 


图 8.95 ”添加 外 发 光 


步骤 23 ”选中 【控制 面板 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 将 图 形 等 比 缩 小 ， 完 成 之 后 按 Enter 键 确 
认 ， 如 图 8.96 所 示 。 


图 8.96 ”缩小 图 形 


步骤 24， 选 择 工具 箱 中 的 【椭圆 工具 】 ( ， 在 选项 栏 中 将 【填充 】 更 改 为 红色 (R: 255, G: 41，B: 82) ，【 描 边 
更 改 为 无 ， 在 界面 底部 位 置 按 住 hift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 3】 图 层 ， 如 图 8.97 所 示 。 


图 8.97 绘制 正 


步骤 25 “在 【图 层 】 面 板 中 选中 【椭圆 3】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 关 按钮 ， 在 菜单 中 选择 【投影 】 命 
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步骤 26 fr5sËHHRJXJusiErii$ [itar] SEr2J [IE] , [PEN] sSErXJJšs@, (R: 84, G: 19, B: 47) ，【 不 透明 
度 】 更 改 为 30%，【 距 离 】 更 改 为 20 像 素 ，【 大 小 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 8.98 所 示 。 


图 8.98 ”添加 投影 


8.5.2 ”绘制 界面 细节 


DISC JOCKEY 


DJ IN PERSON AT THE SCENE IN JJI] H9 | 


制作 交互 元 系 


界面 细节 效果 


步骤 01 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 恩 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
20 像 素 ， 绘 制 一 个 圆 角 起 形 ， 此 时 将 生成 一 个 【 贺 角 息 形 2】 图 层 ， 如 图 8.99 所 示 。 


步骤 02 ”将 贺 角 起 形 癌 石 侧 平移 复制 一 份 ， 如 图 8.100 所 示 。 


图 8.99 ”绘制 圆 角 和 矩形 


图 8.100 复制 图 形 


步骤 03 ”选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 白色 ，【 宽 度 】 更 改 为 8 
凡 ， 绘 制 一 个 炬 形 ， 此 时 将 生成 一 个 【和 矩形 2】 图 层 ， 如 图 8.101 所 示 。 


步骤 04 ” 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 ， 如 图 8.102 所 示 。 


图 8.101 ”绘制 矩形 


Ü| | 
Z 
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图 8.102 ”旋转 图 形 


步骤 05 ”选择 工具 箱 中 的 【删除 锚 点 工具 】 Z? ， 单 击 矩 形 右 侧 锚 点 ， 将 其 删除 ， 再 适当 增加 三 角形 的 宽度 ， 如 图 8.103 所 


步骤 06 ”选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 8 像 


， 在 三 角形 左 侧 按 住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 8.104 所 示 。 


图 8.103 ”删除 锚 点 


键 ， 


步骤 07 


步骤 08 


图 8.104 ”绘制 线段 


同时 选中 【形状 1】 及 【 算 形 2】 图 层 ， 按 住 At+ shift 组 合 键 向 右 侧 平移 复制 。 


同时 选中 生成 的 【形状 1 拷贝 】 及 【矩形 2 拷贝 】 图 层 ， 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 单 击 鼠 标 右 


从 弹出 的 快捷 菜单 中 选择 【水 平 翻转 】 命 令 ， 完 成 之 后 按 Enter 键 确认 ， 如 图 8.105 所 示 。 


图 8.105 ”变换 图 形 


步骤 09 ”选择 工具 箱 中 的 【直线 工具 】 ⁄ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 粗 细 】 更 改 为 8 像 
素 ， 按 住 shift 键 绘制 一 条 水 平 线段 ， 将 生成 一 个 【形状 2】 图 层 ， 如 图 8.106 所 示 。 


步骤 10 ”在 【图 层 】 面 板 中 选中 【形状 2】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【形状 2 拷贝 】 
图 层 ， 如 图 8.107 所 示 。 


图 8.106 ”绘制 线段 


认 ， 


步骤 12 ”选中 【形状 2 拷贝 】 图 层 ， 


如 图 8.109 所 示 。 


图 8.107 复制 图 层 


步骤 11 选中 【形状 2】 图 层 ， 将 其 图 层 混合 模式 设置 为 【和 柔 苍 】， 如 图 8.108 所 示 。 


按 Ctrl+T 组 合 键 对 其 执行 【 目 由 变换 】 命 令 ， 将 线段 长 度 缩小 ， 完 成 之 后 按 Enter 键 确 


图 8.108 复制 图 层 


图 8.109 ”缩小 长 度 


步骤 13 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 合适 的 位 置 按 住 
Shift 键 绘制 一 个 正 圆 图 形 ， 如 图 8.110 所 示 。 


步骤 14 执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \ 音 乐 播 放 界 面 设 计 \ 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 界面 底部 适当 位 置 并 缩小 ， 如 图 8.111 所 示 。 


图 8.110 225] E [J 


图 8.111 添加 素材 


步骤 15 ”选择 工具 箱 中 的 【 横 排 文字 工具 ] 1 在 适当 的 位 置 添 加 文字 (Humanst521BT Ro. Helvetica Neue45L) , 
这 样 融 完成 了 效果 的 制作 ， 如 图 8.112 所 示 。 


DISC JOC KEY DISC JOCKEY 


A 1 Q 
' >= 
` A , 


DJ IN PERSON AT THE SCENE DJ IN PERSON AT THE SCENE 


图 8.112 最终 效果 


86 ”运动 数据 界面 设计 


设计 构思 


本 例 讲 解 制 作 运动 数据 界面 ， 此 款 界 面 在 制作 过 程 中 以 直观 的 运动 数据 为 主题 ， 通 过 文字 信息 与 规范 的 图 形 相 结合 ， 整 体 表 
现 出 高 品质 应 用 的 视觉 效果 。 本 例 草图 及 最 终 效果 如 图 8.113 所 示 。 


. 难 易 指数 : kk k Yay 
素材 位 置 : 调用 素材 \ 第 8 章 \ 运 动 数 据 界面 设计 
案例 位 置 : 源 文件 \ 第 8 章 \ 运 动 数据 界面 设计 .psd 


` 视频 位 置 : 视频 教学 \8.6 运 动 数 据 界 面 设计 .avi 


SPORTS DATA 


Bike Ë a 


£ 


Park Fuinr ing in s) rin 


图 8.113 ”最终 效果 


@ Bike game TIME RECORD Park runring in 30 min 


W ning 
>= 


控制 面板 功能 图 示 时 间 记 录 信 息 


主体 色 为 红 检 色调 ， 以 黄色 、 花 色 及 蓝 色 作为 辅助 色 ， 多 元 化 色彩 表现 出 不 同 的 功能 特征 。 


[ES | eCeCeC--€C CC D.D c Y 
红色 (R:224,G:68,B:69) 黄色 (R:255,G:183,B:49) 紫色 (R:189,G:96,B:186) 蓝 色 (R:77,G:188,B:234) 


8.6.1 ”制作 界面 轮 局 


SPORTS DATA 


ZZ bl| JJ Be TZ +H 
绘制 进度 图 形 


<— T i) IE PR IH #Ë ER 


界面 轮廓 效果 
操作 步骤 


步骤 01 执行 菜单 栏 中 的 【文件 】|【 新 建 】 人 命令， 在 弹出 的 对 话 框 中 设置 【宽度 】 为 1080 像 素 ，【 局 大 】 为 1920 像 素 ， 
【分 辨 率 】 为 72 像 素 / 英 寸 ， 新 建 一 个 空 日 画布 ， 将 画布 填 宛 为 浅黄 色 (R: 247, G: 242, B: 238) 。 


步骤 02 ”选择 工具 箱 中 的 【和 矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 浅 红色 (R: 230, G: 94, B: 94) , [3835] 
更 改 为 无 ， 在 界面 顶部 绘制 一 个 炬 形 ， 此 时 将 生成 一 个 【矩形 1】 图 层 ， 如 图 8.114 所 示 。 


步骤 03 ”执行 荣 单 栏 中 的 【文件 】|【 打 开 】 人 驹 令 ， 选 择 “ 调 用 素材 \ 第 8 章 \ 运 动 数据 界面 \ 状 态 栏 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 顶部 位 置 并 适当 缩小 ， 如 图 8.115 所 示 。 


图 8.114 绘制 矩形 


图 8.115 ”添加 素材 
步骤 04 ”选择 工具 箱 中 的 【 横 排 文 字 工 具 】 Fa 在 适当 的 位 置 添 加 文字 (Humanst521BT Ro) ， 如 图 8.116 所 示 。 


步骤 05 ”执行 菜单 栏 中 的 【文件 】|【 打 开 】 命 令 ， 选 择 “ 调 用 率 材 \ 第 8 章 \ 图 标 .psd” 文 件 ， 单 击 【 打 开 】 按 钮 ， 将 打开 的 
素材 拖 入 画布 中 文字 左右 两 侧 位 置 ， 如 图 8.117 所 示 。 


SPORTS DATA 


图 8.116 添加 文字 


SPORTS DATA 


图 8.117 添加 素材 


步骤 06 ”选择 工具 箱 中 的 【矩形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 绘 制 一 个 矩形 ， 此 时 
将 生成 一 个 【和 窍 形 2】 图 层 ， 如 图 8.118 所 示 。 


步骤 07/ 在 【图 层 】 面 板 中 选中 【矩形 2】 图 层 ， 单 击 面 板 底部 的 【添加 图 层 样 式 】 = 按钮 ， 在 菜单 中 选择 【渐变 堵 加 1 


人 人 
RD Zo 


步骤 08 在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 楼 色 (R: 233, G: 102, B: 48) 到 红色 (R: 224, G: 68, B: 69) , = 
成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 8.119 所 示 。 


图 8.118 ”绘制 矩形 


图 8.119 ”添加 渐变 


步骤 09， 选 择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 黑色 ，【 宽 度 】 更 改 为 50 
凡 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 。 


步 又 10 ” 蛙 击 【设置 形状 摘 边 类 型 】| -| 按钮 ， 在 弹出 的 面板 中 单 击 【端点 】 下 方 按钮 ， 在 弹出 的 选项 中 选择 第 二 种 
圆 形 闯 点 类 型 ， 如 图 8.120 所 示 。 


步骤 11 在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 时 按钮 上 ， 复 制 一 个 【椭圆 1 拷贝 】 
图 层 ， 如 图 8.121 所 示 。 


图 8.120 ”绘制 正 


图 8.121 复制 图 层 


步骤 12 ”将 【椭圆 1 拷贝 】 图 层 的 图 形 【 描 边 】 更 改 为 白色 。 选 择 工具 箱 中 的 【直接 选择 工具 】 羽 ， 选 中 左上 角 部 分 线段 ， 
将 其 删除 ， 如 图 8.122 所 示 。 


步骤 13 ”选中 【椭圆 1】 图 层 ， 将 混合 模式 设置 为 【 蔷 加 】，【 不 透明 度 】 更 改 为 50%， 效 果 如 图 8.123 所 示 。 


图 8.122 ”删除 线段 


图 8.123 ”设置 图 层 混合 模式 


又 14 ”选择 工具 箱 中 的 【 圆 角 矩形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 在 圆 环 中 辐 绘制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 1】 图 层 ， 如 图 8.124 所 示 。 


步 又 15 ”选中 【 圆 角 矩 形 1】 图 层 ， 按 住 Alt+ Shift 组 合 键 向 右 侧 平移 复制 一 份 ， 如 图 8.125 所 示 。 


图 8.124 ”绘制 圆 角 和 矩形 


图 8.125 复制 图 形 


步骤 16 同时 选中 【 圆 角 息 形 1 拷贝 】 及 【 圆 角 窍 形 1】 图 层 ， 将 其 图 层 混合 模式 设置 为 【 旱 加 】， 【不 透明 度 】 更 改 为 
50%， 效 果 如 图 8.126 所 示 。 


步骤 17 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 适当 的 位 置 添加 文字 (Humanst521BT Ro) ， 如 图 8.127 所 示 。 


\ 


图 8.127 添加 文字 


步骤 18 ”选择 工具 箱 中 的 【椭圆 工具 】 @ ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 圆 环 左 侧 位 置 按 住 
Shift 键 绘制 一 个 正 圆 图形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 8.128 所 示 。 


步骤 19 ”将 正 圆 复制 一 份 并 移 至 右 侧 相对 的 位 置 ， 将 生成 一 个 【椭圆 2 拷贝 】， 如 图 8.129 所 示 。 


图 8.128 ”绘制 正 贺 


图 8.129 ”复制 图 形 


选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 正 圆 位 置 添加 文字 (Humanst521BT Bold) ， 如 图 8.130 所 示 。 


图 8.130 “添加 文字 


步骤 21 ”同时 选中 【椭圆 2 拷贝 】 及 【椭圆 2】 图 层 ， 按 Ctrl+E 组 合 键 将 其 合并 ， 此 时 将 生成 一 个 【椭圆 2 拷贝 】 图 层 : 再 单 
击 面板 底部 的 【添加 图 层 蒙 版】 加 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 8.131 所 示 。 


步骤 22” 按 住 Ctrl 键 单 击 【STAR】 图 层 缩 贞 图 ， 将 其 载 入 选区 ， 再 按 住 Shift+ Ctrl 组 合 键 单 击 【STOP】 图 层 缩 此 图 ， 将 其 


添加 全 选区 。 


步骤 23 ”将 选区 填充 为 黑色 ， 隐 藏 部 分 图 形 ， 完 成 之 后 按 Ctrl+D 组 合 键 取 消 选 区 ， 再 将 两 个 文字 图 层 删 除 ， 如 图 8.132 所 
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图 8.131 添加 图 层 蒙 版 
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TIME RECORD | Park runring in 30 min 


状态 信息 


步骤 01 选择 工具 箱 中 的 【椭圆 工具 】 € ， 在 选项 栏 中 将 【填充 】 更 改 为 黄色 (R: 255, G: 183, B: 49) , 


更 改 为 无 ， 按 住 Shift 键 绘制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 8.133 所 示 。 


步骤 02 ”选中 【椭圆 2】 图 层 ， 向 下 复制 两 份 ， 并 分 别 更 改 为 两 种 不 同 的 颜色 ， 如 图 8.134 所 示 。 


- 绘制 状态 图 形 


— I Sg]! 文子 ra Ia = u 


图 8.133 ”绘制 正 


图 8.134 复制 图 形 
提示 与 技巧 
更 改 顾 色 的 目的 是 为 了 区 分 图 形 之 间 的 功能 化 差异 ， 顾 色 值 并 非 固 定 ， 可 根据 界面 整体 色调 而 定 。 


步骤 03 ”执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选 择 “ 调 用 素材 \ 第 8 草 \ 运 动 数据 界面 \ 功 能 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 正 圆 位 置 并 缩小 ， 如 图 8.135 所 示 。 


步骤 04 ”选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 196, G: 196, B: 196) ，【 描 边 】 
更 改 为 无 ，【 粗 细 】 更 改 为 5 像素 ， 在 功能 图 标 位 置 按 住 Shift 键 绘制 线段 ， 将 线段 复制 数 份 将 图 形 连 接 ， 如 图 8.136 所 示 。 


L. 


图 8.135 ”添加 素材 


图 8.136 ”绘制 线段 


步骤 05 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 适当 的 位 置 添加 文字 (Helvetica Neue45L、Humanst521BT Ro) ， 
如 图 8.137 所 示 。 


步骤 06 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 在 界面 辰 部 绘制 一 个 圆 角 息 形 ， 如 图 8.138 所 示 。 
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图 8.137 ”添加 文字 
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图 8.138 绘制 图 形 


步骤 07 ”选择 工具 箱 中 的 【 圆 角 矩 形 工具 】 转 ， 在 选项 栏 中 将 【填充 】 更 改 为 无 ，【 描 边 】 更 改 为 绿色 (R: 155, G: 
181, B: 22) ，【 半 径 】 更 改 为 10 像 素 ， 在 圆 角 息 形 左 侧 绘 制 一 个 圆 角 答 形 ， 如 图 8.139 所 示 。 


步骤 08 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 适当 的 位 置 添加 文字 (Humanst521BT Ro. Humanst521BT Ro) , 
这 样 就 完成 了 效果 的 制作 ， 如 图 8.140 所 示 。 
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图 8.139 ”绘制 圆 角 矩形 
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图 8.140 ”最终 效果 


8.7 ”电影 应 用 界面 设计 


设计 构思 


本 例 讲解 制作 电影 应 用 界面 ， 以 经 典 的 电影 截图 作为 主 视觉 图 像 ， 将 其 与 界面 相 结 合 ， 整 体 的 电影 特征 十 分 明显 。 本 例 草 图 


及 最 终 效果 如 图 8.141 所 示 。 
. 难 易 指数 : kok k Yc < 
' 素材 位 置 : 调用 素材 \ 第 8 章 \ 电 影 应 用 界面 设计 
` 案例 位 置 : 源 文件 \ 第 8 章 \ 电 影 应 用 界面 设计 .psd 


. 视频 位 置 : 视频 教学 \8.7 电 影 应 用 界面 设计 .avi 


图 8.141 最终 效果 
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色彩 分 析 


以 清新 绿色 作为 界面 的 主体 色调 ， 将 浅 绿色 与 之 搭配 ， 界 面 整体 色彩 十 分 清 严 、 和 舒适 。 


绿色 (R:83,G:203,B:108) 浅 绿色 (R:240,G:255,B:249) 
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操作 步 又 


步骤 01 执行 菜单 栏 中 的 【文件 】| 【新建 】 命 令 ， 在 弹出 的 对 话 框 中 设置 【这 度 】 为 750 像 素 ，【 高 度 】 为 1334 像 素 ， 
) 辩 率 】 为 72 像 素 / 天 十 ， 新 建 一 个 空 日 画布 ， 将 画布 填充 为 浅 绿色 (R: 240, G: 255, B: 249) 。 


步骤 02 执行 菜单 杜 中 的 【文件 】| 【打开 】 命 令 ， 选择“ 调用 素材 \ 第 8 草 \ 电 影 应 用 界面 \ 图 像 jpg” 文 件 ， 单 击 【 打 开 ]】 按 
将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 1】， 如 图 8.142 所 示 。 


步骤 03， 在 【图 层 】 面 板 中 选中 【背景 】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 Sl 按钮 上 ， 复 制 一 个 【背景 拷贝 】 图 
将 其 移 至 【图 层 1】 上 方 ， 如 图 8.143 所 示 。 


喇 


图 8.142 ”添加 素材 


图 8.143 复制 图 层 


步骤 04 ”在 【图 层 】 面 板 中 选中 【背景 拷贝 】 图 层 ， 单 击 面板 底部 的 【添加 图 层 蒙 版 】 圈 按钮 ， 为 其 添加 图 层 蒙 版 ， 如 图 
8.144 所 示 。 


步骤 05 ”选择 工具 箱 中 的 【渐变 工具 】 央 ,编辑 黑色 到 白色 的 渐变 ， 单 击 选项 栏 中 的 【线性 渐变 】 周 按钮 ， 在 图 像 顶 部 


位 置 拖 动 ， 隐 藏 部 分 图 像 ， 如 图 8.145 所 示 。 


图 8.144 ”添加 图 层 蒙 版 


图 8.145 ”隐藏 图 形 


步骤 06 “选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 力 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 人 和 像素， 绘制 一 个 圆 角 和 矩形 ， 此 时 将 生成 一 个 【 圆 角 算 形 1】 图 层 ， 如 图 8.146 所 示 。 


步骤 07， 在 【图 层 】 面 板 中 选中 【 圆 角 矩 形 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 辐 按钮 上 ， 复 制 一 个 【 圆 角 矩 
形 1 拷贝 】 图 层 ， 如 图 8.147 所 示 。 


图 8.146 ”绘制 图 形 
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图 8.147 复制 图 层 


选中 【 圆 角 和 矩形 1 拷贝 】 图 层 ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 89, G: 203, B: 108) ， 如 图 8.148 所 


又 09 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ñ ， 选 中 圆 角 矩形 顶部 左右 两 个 锚 点 ， 将 其 删除 ， 如 图 8.149 所 示 。 


图 8.148 22 h] E] # £E3 


图 8.149 ”删除 锚 点 


步骤 10 ”选择 工具 箱 中 的 【直接 选择 工具 】 似 ， 同 时 选中 左右 两 个 锚 点 并 向 下 拖 动 ， 缩 小 其 高 度 ， 如 图 8.150 所 示 ， 


图 8.150 ”缩小 高 度 


步骤 11 选择 工具 箱 中 的 【 圆 角 起 形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 摘 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
10 像 素 ， 在 图 形 元 侧 绘 制 一 个 圆 角 窍 形 ， 此 时 将 生成 一 个 【 圆 角 息 形 2】 图 层 ， 如 图 8.151 所 示 。 


步骤 12 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 8 草 \ 电 影 应 用 界面 \ 图 像 2jpg” 文 件 ， 单 击 【 打 开 】 
按钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 2】， 如 图 8.152 所 示 。 


图 8.151 22 h] š] # 4E3E 


图 8.152 ”添加 素材 


步骤 13 选中 【图 层 2】 图 层 ， 执 行 菜单 栏 中 的 【图 层 】|【 创 建 剪 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 剪贴 蒙 版 ， 隐 藏 部 分 图 
像 ， 再 将 图 像 适当 缩小 或 移动 ， 如 图 8.123 所 示 。 
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图 8.153 ”创建 剪贴 蒙 版 


步骤 14 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 8 草 \ 电 影 应 用 界面 \ 返 回 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 画布 中 左上 角 位 置 ， 如 图 8.154 所 示 。 
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图 8.154 ”添加 素材 


步骤 15 ”选择 工具 箱 中 的 【 椭 贺 工具】 日 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ， 在 适当 位 置 按 住 Shift 
键 绘 制 一 个 正 圆 图 形 ， 此 时 将 生成 一 个 【椭圆 1】 图 层 ， 如 图 8.155 所 示 。 


步骤 16 ”在 【图 层 】 面 板 中 选中 【椭圆 1】 图 层 ， 单 击 面板 底部 的 【添加 图 层 样式 】 虞 按钮 ， 在 菜单 中 选择 【渐变 午 加 】 命 


As 
Xo 


dH 


步骤 17 ”在 弹出 的 对 话 框 中 将 【渐变 】 更 改 为 绿色 (R: 36, G: 136, B: 53) 到 绿色 (R: 119, G: 194, B: 58) ， 
成 之 后 单 击 【 确 定 】 按 钮 ， 如 图 8.156 所 示 。 


图 8.155 ”绘制 正 辆 


图 8.156 ”添加 渐变 


步骤 18 ”选择 工具 箱 中 的 【 圆 角 和 矩形 工具 】 国 ， 在 选项 栏 中 将 【填充 】 更 改 为 白色 ，【 描 边 】 更 改 为 无 ，【 半 径 】 更 改 为 
3 像素 ， 人 在 正 圆 位 置 按 住 Shift 键 绘制 一 个 圆 角 算 形 ， 此 时 将 生成 一 个 【 圆 角 窍 形 3】 图 层 ， 如 图 8.157 所 示 。 


步骤 19 按 Ctrl+T 组 合 键 对 其 执行 【自由 变换 】 命 令 ， 当 出 现 变 形 框 之 后 ， 在 选项 栏 的 【旋转 】 文 本 框 中 输入 45， 完 成 之 
后 按 Enter 键 确认 ， 如 图 8.158 所 示 。 


图 8.157 22] |] # £E3E 


图 8.158 3 E] 


步骤 20 ”选择 工具 箱 中 的 【直接 选择 工具 】 Ñ ， 选 中 圆 角 矩 形 左 侧 锚 点 ， 将 其 删除 ， 再 将 其 图 层 【 不 透明 度 】 更 改 为 
60%， 效 果 如 图 8.159 所 示 。 


图 8.159 ”删除 锚 点 


步骤 21 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 上 ， 在 画布 适当 位 置 添加 文字 (Comic Sans MS Bold) ， 如 图 8.160 所 示 。 
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two hoppy life 


图 8.160 “添加 文字 


步骤 22 执行 菜单 柱 中 的 【文件 】| 【打开 】 命 令 ， 选择 “调用 素材 \ 第 8 草 \ 电 影 应 用 界面 \ 电 影 图 标 .psd” 文 件 ， 单 击 【 打 
开 】 按 钮 ， 将 打开 的 素材 拖 入 界面 中 适当 位 置 ， 如 图 8.161 所 示 。 


图 8.161 添加 素材 
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图 8.162 添加 文字 


步骤 24 ”选择 工具 箱 中 的 【椭圆 工具 】 总 ， 在 选项 栏 中 将 【填充 】 更 改 为 绿色 (R: 89, G: 203, B: 108) ，【 描 边 】 
更 改 为 无 ， 人 在 【 圆 角 息 形 1】 图 层 的 图 形 底部 绘制 一 个 椭圆 ， 将 生成 一 个 【椭圆 2】 图 层 ， 如 图 8.163 所 示 。 


步骤 25 ”执行 荣 单 栏 中 的 【 滤 镜 】|【 模 糊 】|【 局 斯 模糊 】 命 令 ， 在 弹出 的 对 语 框 中 单 击 【 转 换 为 智能 对 象 】 按 钮 ， 然 后 在 
弹出 的 对 话 框 中 将 【半径 】 更 改 为 30 像 素 ， 完 成 之 后 单 击 【 确 定 】 按 钮 ， 效 果 如 图 8.164 所 示 。 
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图 8.163 ”绘制 椭 
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8.7.2 ”处 理 界面 评 细 信息 


图 8.164 ”添加 高 斯 模糊 
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步骤 01 ”选择 工具 箱 中 的 【直线 工具 】 ， 在 选项 栏 中 将 【填充 】 更 改 为 灰色 (R: 210, G: 218, B: 212) ，【 描 边 】 
更 改 为 无 ，【 粗 细 】 更 改 为 3 像素 ， 按 住 Shift 键 绘制 一 条 线段 ， 将 生成 一 个 【形状 1】 图 层 ， 如 图 8.165 所 示 。 


步骤 02 ”选择 工具 箱 中 的 【 横 排 文字 工具 】 h ， 在 线段 上 方 添加 文字 (Comic Sans MS Bold) ， 如 图 8.166 所 示 。 
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图 8.165 ”绘制 线段 
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图 8.166 ”添加 文字 


步骤 03 ”在 【图 层 】 面 板 中 选中 【形状 1】 图 层 ， 将 其 拖 至 面板 底部 的 【创建 新 图 层 】 轩 按钮 上 ， 复 制 一 个 【形状 1 拷贝 】 
图 层 ， 如 图 8.167 所 示 。 


步骤 04 将 【形状 1 拷贝 】 图 层 中 线段 【填充 】 更 改 为 绿色 (R: 89, G: 203, B: 108) ， 并 缩小 其 长 度 ， 如 图 8.168 所 


小 \。 


图 8.167 复制 图 层 


图 8.168 ”缩小 长 度 


步骤 05 ”选择 工具 箱 中 的 【椭圆 工具 】 总 ， 在 选项 栏 中 将 【填充 】 更 改 为 黑色 ，【 描 边 】 更 改 为 无 ， 在 适当 的 位 置 按 住 
Shift 键 绘制 一 个 正 圆 图 形 ， 将 生成 一 个 【椭圆 3】 图 层 ， 如 图 8.169 所 示 。 


步骤 06 ”将 正 圆 向 下 复制 一 份 ， 将 生成 一 个 【椭圆 3 拷 贝 】 图 层 ， 如 图 8.170 所 示 。 
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图 8.170 复制 正 圆 


步骤 07 ”执行 荣 单 栏 中 的 【文件 】|【 人 打开】 命令， 选择 “调用 素材 \ 第 8 章 \ 电 影 应 用 界面 \ 图 像 3jpg” 文 件 ， 单 击 【 打 开 1】 
按钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 3】， 如 图 8.171 所 示 。 


nformation more news 


图 8.171 添加 素材 


步骤 08 执行 荣 单 栏 中 的 【图 层 】|【 创 建 筋 贴 蒙 版 】 命 令 ， 为 当前 图 层 创建 筋 贴 花 版 ， 隐 藏 部 分 图 像 ， 如 图 8.172 所 示 。 


图 8.172 ”创建 前 贴 蒙 版 


步骤 09 执行 荣 单 栏 中 的 【文件 】|【 人 打开】 命令， 选择 “调用 素材 \ 第 8 章 \ 电 影 应 用 界面 \ 图 像 4jpg” 文 件 ， 单 击 【 打 开 1】 


按钮 ， 将 打开 的 素材 拖 入 画布 中 并 适当 缩小 ， 其 图 层 名 称 更 改 为 【图 层 4】， 如 图 8.173 所 示 。 


步骤 10 ”以 同样 的 万 法 为 图 像 创 建 创 建 葛 贴 蒙 版 ， 如 图 8.174 所 示 。 
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图 8.173 ”添加 素材 


图 8.174 创建 剪贴 蒙 版 


步骤 11 选择 工具 箱 中 的 【 横 排 文字 工具 】 T ， 在 适当 的 位 置 添加 文字 (Comic Sans MS Bold. Comic Sans MS 
Reg) ， 这 样 束 完成 了 效果 的 制作 ， 如 图 8.175 所 示 。 
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图 8.175 ”最终 效果 


